如何在 html5 中显示 SVG 圆圈内的图像?
Posted
技术标签:
【中文标题】如何在 html5 中显示 SVG 圆圈内的图像?【英文标题】:How can I display an image inside SVG circle in html5? 【发布时间】:2015-09-03 00:20:59 【问题描述】:有没有办法在 SVG Circle 中显示图像?
我尝试在 Svg 元素中添加图像,但图像没有出现在圆圈中。
<svg >
<circle cx="50" cy="50" r="40"stroke="green" stroke- fill="yellow" />
<img src="starkeen_ane.jpg"/>
</svg>
你能帮帮我吗?
【问题讨论】:
在 svg 中你应该使用<image>
而不是 <img>
。
***.com/questions/6249664/…
另外,如果您希望图像显示为圆形,例如填充圆形,则必须使用<clipPath>
。谷歌它的例子。
【参考方案1】:
这里是一个详细说明 Havenard 上述评论的示例:
<svg >
<defs>
<clipPath id="circleView">
<circle cx="250" cy="125" r="125" fill="#FFFFFF" />
</clipPath>
</defs>
<image
xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg"
clip-path="url(#circleView)"
/>
</svg>
您实际上并没有在内部绘制带有图像的 <circle>
元素 - 而是定义一个圆形剪辑路径,并将其设置为 <image>
标记上的“剪辑路径”属性。
【讨论】:
不要使用蒙版作为剪辑路径。使用clipPath,这就是存在clipPath 的原因。蒙版是一种光栅操作,占用大量内存且速度较慢。 哦。好点,罗伯特。更新示例。 developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…. 非常好。仅供参考,似乎填充属性在这里什么都不做。【参考方案2】:这可能不是最好的方法。但效果很好。您可以将其放置到相对位置并编辑顶部和左侧属性,以便您的图像位于 svg 图像的中心。同样重要的是将它放在您的svg
-tag 之外。
img
position: relative;
top: -30px;
left: -70px;
<svg >
<circle cx="50" cy="50" r="40"stroke="green" stroke- fill="yellow" />
</svg>
<img src="http://i.stack.imgur.com/vxCmj.png"/>
【讨论】:
然后在<svg>
下填充一个与图像高度相同的空白区域。就是为了普通的事情滥用position: relative
是多么糟糕。以上是关于如何在 html5 中显示 SVG 圆圈内的图像?的主要内容,如果未能解决你的问题,请参考以下文章