Raphaël.js:如何縮放圓形的填充圖像以適合圓形? (Raphaël.js: How to scale a circle's fill image to fit the circle?)


問題描述

Raphaël.js:如何縮放圓形的填充圖像以適合圓形? (Raphaël.js: How to scale a circle's fill image to fit the circle?)

I'm trying to use Raphael's VML functionality for generating a circle with an image (fix for IE8 that lacks border‑radius).

My problem is that if I use

circle.attr({fill: 'url(image.jpg)'});

and my image is larger than the circle the image is only partially showed and I can't find a way to downscale the image to the diameter of the circle.

How can I do this?

‑‑‑‑‑

參考解法

方法 1:

Are you serious about fixing IE8 border‑radius with RaphaelJS? I would suggest something like css3pie and there is even question in SO about usage.

But still, if you want to use RaphaelJS, you will need to use Element.transform to scale your image and only afterwards, set up rounded corners effect with another element.

(by tirithenDeele)

參考文件

  1. Raphaël.js: How to scale a circle's fill image to fit the circle? (CC BY‑SA 3.0/4.0)

#raphael #javascript #vml #html #svg






相關問題

如何沿路徑為 Raphael 對象設置動畫? (How to animate a Raphael object along a path?)

Raphaël.js:如何縮放圓形的填充圖像以適合圓形? (Raphaël.js: How to scale a circle's fill image to fit the circle?)

如何通過“raphael-svg-import”加載和顯示 SVG 數據? (How to load and display SVG data by "raphael-svg-import"?)

gRaphael 餅圖:添加動畫 (gRaphael Pie Chart : Add animation)

如何在服務器端 Java 中使用 JavaScript 圖表庫,如 D3.js 或 Raphaël (How to use a JavaScript chart library like D3.js or Raphaël in server-side Java)

raphael newbie:彈窗背景在跳躍 (raphael newbie: popup background is jumping)

如何製作流暢的圓弧動畫? (How to create smooth circular arcing animation?)

拉斐爾對角變換對象和無限setIntervals (Raphael transform object diagonally and infinite setIntervals)

Raphael JS 服務器端 (Raphael JS server-side)

Raphael.js:在我的情況下如何拖動路徑的一側? (Raphael.js : How to drag one side of the path in my case?)

如何用 raphael js 繪製曲線? (How to draw curves with raphael js?)

如何用拉斐爾垂直縮放? (How to vertically scale with Raphael?)







留言討論