用图像填充 svg 背景答案

【问题标题】：filling svg background with an image用图像填充 svg 背景
【发布时间】：2019-01-28 22:39:16
【问题描述】：

我创建了一个 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>

【问题讨论】：

很确定这是重复的 - stackoverflow.com/questions/3796025/…

标签： html css image svg

【解决方案1】：

最简单的解决方案是使用patternContentUnits="objectBoundingBox"并将图像width和height设置为"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>

【讨论】：

这太好了，谢谢！你知道我将如何旋转心脏以成为正确的方式吗？
这有点棘手，因为如果你旋转路径，你最终也会旋转图像。您也可以以相反的方式旋转图像，但它不再是矩形，并且不会再整齐地填充形状。到目前为止，最简单的解决方案是重做心脏路径本身，使其成为您想要的方向。