SVG不变大小

Question

我创建了一个svg heart，其中包含背景图片。

我正在尝试将svg增大，但是更改图案和svg本身的宽度和高度均不起作用。

    <svg
    
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" height="315" width="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

对于可调整大小的SVG，请使用viewBox="0 0 315 345"代替height="315" width="345"

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

单击“调整大小”按钮以查看是否需要此内容。

https://jsfiddle.net/gbxquc05/29/

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 400 400">

不幸的是，SVG中的绘制路径仅限于绝对单位。这是使用viewBox创建转换为百分比的坐标系的解决方法。