首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >用背景图像填充SVG路径元素

用背景图像填充SVG路径元素
EN

Stack Overflow用户
提问于 2010-09-26 07:48:03
回答 1查看 238.8K关注 0票数 187

可以为SVG <path>元素设置background-image吗?

例如,如果我设置了元素class="wall",CSS样式.wall {fill: red;}可以工作,但.wall{background-image: url(wall.jpg)}.wall {background-color: red;}都不行。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-09-27 00:45:45

您可以通过将背景转换为pattern来完成此操作

代码语言:javascript
复制
<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

根据您的图像调整宽度和高度,然后从路径引用它,如下所示:

代码语言:javascript
复制
<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

Working example

票数 294
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3796025

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档