Question

我创建了一个带有图像作为图案的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>

Answer 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>

用图像填充svg背景

1 个答案: