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>
嗯,我无法让它与接受的答案一起工作。这就是我最终做到的:
<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>
(此比例适用于方形图像)
通过正确的解释解决了图像重复问题(感谢 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>
我知道这是一个老问题,但我使用了滤镜来覆盖图像。由于缩放,上述解决方案对我不起作用,而且图像似乎是平铺的。我用的是这个,我希望它也能帮助其他人。
<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>
这是我的解决方案,不同之处在于它不使用
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>