程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

用图像填充 svg 背景

发布于2021-10-23 03:30     阅读(1149)     评论(0)     点赞(25)     收藏(1)


我创建了一个 svg 心,里面有一个图像作为图案。我正在努力使图像适合整个心脏,但我运气不佳。

任何帮助都会很棒,非常感谢。

svg {
  width: 300px;
  border: 1px solid grey;
  margin: 1em auto;
  display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 315 345">

    <!-- START SVG RULES -->
    <defs>
        <!-- DEFINE IMAGE INSIDE PATTERN -->
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                   x="0" y="0" width="100" height="100" />
        </pattern>

        <!-- SVG SHAPE CREATION -->
        <g id="heart">
            <path d="M0 200 v-200 h200
                     a100,100 90 0,1 0,200
                     a100,100 90 0,1 -200,0
                     z" />
        </g>
    </defs>

    <use xlink:href="#heart" class="outline" fill="url(#img1)"  />
</svg>


解决方案


最简单的解决方案是使用patternContentUnits="objectBoundingBox"和设置图像widthheight"1"

然后要使图像填充图案,请设置preserveAspectRatio="xMidYMid slice"这相当于 CSS 的background-size: cover

svg {
  width: 300px;
  border: 1px solid grey;
  margin: 1em auto;
  display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 315 345">
        
     <!-- START SVG RULES -->
    <defs>
        <!-- DEFINE IMAGE INSIDE PATTERN -->
        <pattern id="img1" patternContentUnits="objectBoundingBox" width="100%" height="100%">
            <image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                   x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice" />
        </pattern>
        
        <!-- SVG SHAPE CREATION -->
        <g id="heart">
            <path
                d="M0 200 v-200 h200
                  a100,100 90 0,1 0,200
                  a100,100 90 0,1 -200,0
                  z" />
        </g>
    </defs>
    <use xlink:href="#heart" class="outline" fill="url(#img1)"  />
</svg>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/208448/ffce481be04a44627179/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

25 0
收藏该文
已收藏

评论内容:(最多支持255个字符)