如何用圖像替換SVG形狀？

鑑於像之一的SVG從這個Google Visualization Example，有對SVG繪製這樣圈：如何用圖像替換SVG形狀？

<circle cx="448.0843694002127" cy="236.6677163333033" r="12" stroke="#cccccc" stroke-width="1" fill="#0000ff"/>

我試圖使用螢火手動替換，與在相同的x/y座標的樣本圖像，所以例如用上面的代碼代替：

<img width="50px" height="50px" cy="135.71439117815066" cx="343.43783232923863" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">

但是這並不起作用（似乎沒有正確呈現）。我想也許使用CX/CY是問題，所以我想切換到那些只是普通的X/Y屬性：

同樣，沒有去。

我想在這裏使用的技術：

Does SVG support embedding of bitmap images?

但同樣，它並沒有呈現在SVG圖像。

我查遍堆棧溢出，但只發現了有關如何使用平鋪圖像的圓圈：

Add a background image (.png) to a SVG circle shape

這有它自己的一套圖像的模式，就像磚和不能的對每個形狀調整大小。

有沒有可靠的方法來做到這一點？理想情況下，我想遍歷每個圓圈，並將其替換爲將替換爲其大小的圖像。

我下載了SVG和手動添加的形象，但我得到了以下錯誤：

XML Parsing Error: prefix not bound to a namespace

Location: (removed for privacy)

Line Number 2, Column 1: <image width="50px" height="50px" y="135.71439117815066" x="343.43783232923863" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">

^

來源

2013-10-25 jmac

你想要的元素<image>不<img>。

cx和cy的屬性在<image>元素上沒有意義。您可以使用x和y（與第二次嘗試時類似），並且請注意，您需要在<image>元素上指定非零值width和height（與第二次嘗試時一樣）。有關詳細信息，請參閱svg spec。

來源

2013-10-25 08:10:26

顯然螢火蟲正在改變我的''中''造成牙齒的多咬牙切齒。但是，當我將SVG移動到一個文本文件並保存爲SVG然後進行更改時，我在此行上得到了'XML Parsing Error：前綴未綁定到名稱空間'。有或沒有斜線。它在一個組元素中，這是一個問題嗎？ – jmac

您需要定義'xlink'命名空間。確保你的根目錄'

只需使用圖像創建一個遮罩。繪製圓形或任何其他圖形引用蒙版。

來源

2014-04-23 16:05:21 user1990602

如何用圖像替換SVG形狀？

回答

相關問題