我试图将SVG文件放入div中，但调整SVG的大小无法正常工作

Question

就像标题说我试图将SVG加载到div中一样，我已经将SVG的代码复制并粘贴到我的HTML中，然后调整其所包含的div的大小。当我这样做时，整个SVG改变了达到我要求的大小，但是当我说这个时我有意思是“看不见的填充”我的意思是实际路径没有占用我想要的250x250像素。

这是我的HTML：

<header>

  <div id="logo">
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="100%" height="100%" viewBox="0 0 804 804" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
      <clipPath id="_clip1">
        <path id="Artboard4" d="M804,402c0,-221.87 -180.13,-402 -402,-402c-221.87,0 -402,180.13 -402,402c0,221.87 180.13,402 402,402c221.87,0 402,-180.13 402,-402Z"/>
      </clipPath>
      <g clip-path="url(#_clip1)">
        <g>
          <path d="M381.924,101.027l-80.257,0c0,0 -80.386,-0.443 -80.256,80.257c0.129,80.7 0,120.385 0,120.385c0,0 0.414,80.104 80.256,80.257c79.843,0.152 -40.128,0 -40.128,0c0,0 -80.279,-0.283 -80.257,80.256c0.022,80.54 0,160.514 0,160.514c0,0 -0.382,80.211 80.257,80.256c80.639,0.046 120.385,0 120.385,0l0,-80.256l-80.257,0c0,0 -39.943,-0.666 -40.128,-40.129c-0.185,-39.463 0,-80.256 0,-80.256c0,0 0.089,-40.119 40.128,-40.129c40.04,-0.009 80.257,0 80.257,0l0,-160.513l-40.128,0c0,0 -40.318,-0.787 -40.129,-40.128c0.19,-39.341 0,-40.129 0,-40.129c0,0 0.398,-40.156 40.129,-40.128c39.73,0.028 40.128,0 40.128,0l0,-80.257Z" style="fill:#3c7abe;"/>
          <path d="M422.052,101.027l80.257,0c0,0 79.98,0.947 80.257,80.257c0.276,79.311 0,120.385 0,120.385c0,0 -0.689,79.91 -80.257,80.257c-79.568,0.347 40.128,0 40.128,0c0,0 80.204,1.599 80.257,80.256c0.053,78.658 0,240.77 0,240.77l-80.257,0l0,-200.641c0,0 -0.753,-40.321 -40.128,-40.129c-39.375,0.193 -80.257,0 -80.257,0l0,-160.513l40.129,0c0,0 39.387,-0.713 40.128,-40.128c0.741,-39.415 0,-40.129 0,-40.129c0,0 -0.679,-39.958 -40.128,-40.128c-39.45,-0.17 -40.129,0 -40.129,0l0,-80.257Z" style="fill:#3c7abe;"/>
        </g>
      </g>
    </svg>

  </div>

</header>

这是我的CSS：

#header {
width: 100%;
border: solid black 1px;
length: 2000px;
}

#logo {
height: 250px;
width: 250px;
margin: 0px;
border: 0px;
padding: 0px;
border: solid blue 5px;
}

Answer 1

您可以分两步修复此问题：

1. 从width="100%" height="100%"元素
中删除<svg>

然后，将以下样式添加到样式表中：

header svg {
position: relative;
top: -13%;
left: -13%;
width: 125%;
height: 125%;
}

查看：

#header {
width: 100%;
border: solid black 1px;
length: 2000px;
}

#logo {
height: 250px;
width: 250px;
margin: 0px;
border: 0px;
padding: 0px;
border: solid blue 5px;
}

header svg {
position: relative;
top: -13%;
left: -13%;
width: 125%;
height: 125%;
}

<header>

  <div id="logo">
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg viewBox="0 0 804 804" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
      <clipPath id="_clip1">
        <path id="Artboard4" d="M804,402c0,-221.87 -180.13,-402 -402,-402c-221.87,0 -402,180.13 -402,402c0,221.87 180.13,402 402,402c221.87,0 402,-180.13 402,-402Z"/>
      </clipPath>
      <g clip-path="url(#_clip1)">
        <g>
          <path d="M381.924,101.027l-80.257,0c0,0 -80.386,-0.443 -80.256,80.257c0.129,80.7 0,120.385 0,120.385c0,0 0.414,80.104 80.256,80.257c79.843,0.152 -40.128,0 -40.128,0c0,0 -80.279,-0.283 -80.257,80.256c0.022,80.54 0,160.514 0,160.514c0,0 -0.382,80.211 80.257,80.256c80.639,0.046 120.385,0 120.385,0l0,-80.256l-80.257,0c0,0 -39.943,-0.666 -40.128,-40.129c-0.185,-39.463 0,-80.256 0,-80.256c0,0 0.089,-40.119 40.128,-40.129c40.04,-0.009 80.257,0 80.257,0l0,-160.513l-40.128,0c0,0 -40.318,-0.787 -40.129,-40.128c0.19,-39.341 0,-40.129 0,-40.129c0,0 0.398,-40.156 40.129,-40.128c39.73,0.028 40.128,0 40.128,0l0,-80.257Z" style="fill:#3c7abe;"/>
          <path d="M422.052,101.027l80.257,0c0,0 79.98,0.947 80.257,80.257c0.276,79.311 0,120.385 0,120.385c0,0 -0.689,79.91 -80.257,80.257c-79.568,0.347 40.128,0 40.128,0c0,0 80.204,1.599 80.257,80.256c0.053,78.658 0,240.77 0,240.77l-80.257,0l0,-200.641c0,0 -0.753,-40.321 -40.128,-40.129c-39.375,0.193 -80.257,0 -80.257,0l0,-160.513l40.129,0c0,0 39.387,-0.713 40.128,-40.128c0.741,-39.415 0,-40.129 0,-40.129c0,0 -0.679,-39.958 -40.128,-40.128c-39.45,-0.17 -40.129,0 -40.129,0l0,-80.257Z" style="fill:#3c7abe;"/>
        </g>
      </g>
    </svg>

  </div>

</header>