如何将图像添加到svg圈的中心？

Question

我试图将图像添加到SVG圆的中心.我尝试过模式

<pattern id="image_birds" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" xlink:href="birds.png" height="50" width="50"></image>
</pattern>

但它并不是图像的中心.我正在使用Javascript.

Answer 1

剪辑应该做你想要的:https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

就像是:

<clipPath id="cut-off-bottom">
  <circle cx="100" cy="100" r="50" />
</clipPath>

<image x="25" y="25" xlink:href="http://placehold.it/150.png" height="150" width="150" clip-path="url(#cut-off-bottom)" ></image>

你可以在这里看到这个例子的结果:http://jsbin.com/EKUTUco/1/edit？html,output

由您根据其大小,通过x和y属性将图像置于javascript中心.

Answer 2

好吧，我找到了答案。我所做的就是向我的 svg 添加一个过滤器：

<filter id = "i1" x = "0%" y = "0%" width = "100%" height = "100%">
    <feImage xlink:href = "birds.png"/>
</filter>

并在圆圈中添加属性：

circle.setAttribute('filter','url(#i1)');