javascript - 如何将图像添加到 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 中将图像居中。