将背景图像 (.png) 添加到 SVG 圆形

Posted 2023-03-04

【中文标题】将背景图像 (.png) 添加到 SVG 圆形

【英文标题】：Add a background image (.png) to a SVG circle shape

【发布时间】：2012-07-14 20:29:11

【问题描述】：

这可能吗？以下是我尝试过的，但它完全用黑色填充了圆圈。

<svg id='vizMenu'  >
    <defs>
        <filter id="dropshadow" >
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
            <feOffset dx="0.5" dy="0.8" result="offsetblur"/> 
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke- fill="url('images/word-cloud.png')"/>
    <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke- fill="url('images/word-cloud.png')"/>
    <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke- fill="#ffffff"/>
</svg>

【问题讨论】：

哈哈有很多，我觉得他们躲在电脑后面感觉很强大。祝你好运

我没有对你投反对票，但可能是因为你发布的代码是用于应用阴影，而不是图像填充！

没关系，填充的无效代码在屏幕外。发布代码时尝试将其减少到最低限度。

目前您不能直接从填充或描边属性引用 PNG。您必须将图像包装在图案元素中并定义应如何平铺和缩放。查看Duopixel的答案。

Fill SVG path element with a background-image的可能重复

【参考方案1】：

好吧，我无法使用已接受的答案。这就是我最终这样做的方式：

    <svg  >
      <defs>
        <pattern id="image" patternUnits="userSpaceOnUse"  >
          <image x="0" y="0"   xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
        </pattern>
      </defs>
      <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
    </svg>

如果您想自定义大小，请使用此作为比例参考：

x = yourPreferredSize

<svg  >
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse"  >
      <image x="0" y="0"   xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="x" cy="x" r="x" fill="url(#image)"/>
</svg>

（此比例适用于方形图像）

【讨论】：

即使我无法使用已接受的答案。谢谢你的回答。

如何阻止它重复？它也没有正确缩放

发现让我的图像在一个圆圈中居中的关键是将<pattern> 上的x 和y 属性设置为宽度/高度的一半（上面的“x”）。仍然没有找到解释为什么 <pattern>'s 宽度/高度必须超过图像的尺寸才能消除边框（填充？），但这也是我的经验。

【参考方案2】：

Image repetition problem solved with proper explanation（感谢 AmeliaBR）

TL;DR：使用了objectBoundingBox 和preserveAspectRatio 的概念！

<svg height = "10%" width = "10%">
  <defs>
    <pattern id = "attachedImage" height = "100%" width = "100%"            
                   patternContentUnits = "objectBoundingBox">
       <image xlink:href = "url.png" preserveAspectRatio = "none" 
              width = "1" height = "1"/>
    </pattern>
  </defs>
<circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/>
</svg>

【参考方案3】：

这是我的解决方案，不同之处在于它不使用patternUnits="userSpaceOnUse"，并且您指定了图像元素的所需宽度和高度。

<defs>
    <pattern id="some name" x="0" y="0"  >
        <image href="image url" x="0" y="0"  ></image>
    </pattern>
</defs>

【讨论】：

我尝试了您的解决方案，但它对我不起作用。我看不到图像。我使用调试，它清楚地向我显示图像处于良好位置但没有显示，我验证我的图像是有效图像。

【参考方案4】：

我知道这是一个老问题，但我使用了过滤器来覆盖图像。由于缩放，上述解决方案对我不起作用，并且看起来图像是平铺的。我改用了这个，我希望它也能帮助其他人。

<svg  >
    <filter id="this_image" x="0%" y="0%"  >
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" />
</svg>

【讨论】：

这可行，但图像是矩形的？圆圈应完全用背景图像填充。

【参考方案5】：

一个svg元素的图片填充是通过SVG Patterns...

<svg  >
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse"  >
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>

【讨论】：

也可以使用 SVG 过滤器，但模式是自然的答案。

我们可以停止使用填充在背景中复制 png 显示吗？在这种情况下，它将继续在后台复制图像。是否可以只显示一次图案？我的意思是没有平铺...

关闭 defs 标签丢失

有没有办法阻止模式重复，让它缩放以适应？

这种技术根本不起作用。您必须使用Teo Inke'sanswer 中的方法。即便如此，当您尝试以任何方式（即缩放等）进行转换时，它也会中断。