如何用图像替换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形状？

回答

相关问题