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

问题描述 投票:0回答:5
html css svg
5个回答
45
投票

svg 元素的图像填充是通过 SVG 模式...

实现的
<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>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>

32
投票

嗯,我无法让它与接受的答案一起工作。这就是我最终做到的:

    <svg width="100" height="100">
      <defs>
        <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
          <image x="0" y="0" height="100" width="100" 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 = 您的首选尺寸

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

(此比例适用于方形图像)


17
投票

通过正确的解释解决了图像重复问题(感谢 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>

13
投票

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

<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" />
</svg>

2
投票

这是我的解决方案,不同之处在于它不使用

patternUnits="userSpaceOnUse"
并且您指定图像元素所需的宽度和高度。

<defs>
    <pattern id="{some name}" x="0" y="0" width="1" height="1">
        <image href="{image url}" x="0" y="0" width="{desired width}" height="{desired height}"></image>
    </pattern>
</defs>
© www.soinside.com 2019 - 2024. All rights reserved.