javascript - 如何将不同的背景图像(.png)添加到 SVG 圆形，并设置描边？

Question

我已经看到了 Add a background image (.png) to a SVG circle shape

但在我的例子中，我需要在不同的图像形状中添加 stroke 和 stroke-width

这是我的代码:

<svg width="700" height="660">   
<defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>   
    <pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url2.png"></image>
    </pattern>   
</defs>   
 <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)"  stroke-width ="2px" stroke="red"/> 
 <circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)"  stroke-width ="2px" stroke="red"/>
</svg>

这行不通，第二个圆圈没有填充图像

还有这个:

<svg width="700" height="660">
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" stroke-width ="2px" stroke="red"/>
</svg>

stroke 和 stroke-width 没用

我该怎么办？我只想显示不同的图像(ps:圆形)并添加不同的轮廓

Answer 1

在 patternUnits 属性值中使用 objectBoundingBox 而不是 userSpaceOnUse。您还需要声明 xlink 命名空间。因此，请尝试使用以下内容:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="660">   
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" xlink:href="https://www.gravatar.com/avatar/31497e3c546c438c4eea4b68d6f9f027?s=32&d=identicon&r=PG&f=1"></image>
    </pattern>   
    <pattern id="image2" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" xlink:href="https://lh5.googleusercontent.com/-x_BhuHcC8Ww/AAAAAAAAAAI/AAAAAAAAABg/hiPWIjRXbhI/photo.jpg?sz=64"></image>
    </pattern>   
  </defs>   
  <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)"  stroke-width ="2px" stroke="red"/> 
  <circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)"  stroke-width ="2px" stroke="red"/>
</svg>

如果您运行代码片段，您会看到，您的个人资料图标显示在第一个圆圈中，而我的 - 在第二个圆圈中。