Question

如果我使用SVG并使用CSS调整大小，我会得到一个奇怪的效果。如果我改变宽度，图像将垂直占用大量空白。如果我改变高度，图像将水平占用大量空白。我该如何解决这个问题？

#item{
  width: calc(30px + 3vw);
  background-color: red;
}

<svg id="item"
   width="100mm"
   height="100mm"
   viewBox="0 0 100 99.999997"
   version="1.1">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     showgrid="false"/>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-197)">
    <rect
       style="opacity:1;fill:#ff6600;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.56531394;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="rect4485"
       width="100"
       height="100"
       x="0"
       y="197" />
  </g>
</svg>

注意：我使用inkscape创建了图像，并删除了无用的XML。

Answer 1

调整svg的大小与jpg或png中的常规图像不同。在svg中，如果你移除尺寸（在你的情况下宽度/高度设置为100mm），你的svg将很容易适应容器宽度，通常是可扩展的。

尝试使用此svg，您应该能够仅使用宽度或高度来调整大小。

顺便说一下，我缩小了代码并删除了所有不必要的标签，只关注相关代码。如果你将这个svg内联到html中，你也可以删除xmlns。

＆＃13;

svg{width:110px} /*your custom dimensions here*/

＆＃13;

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect style="fill:#ff6600;stroke:red;stroke-width:0.565;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" width="100" height="100"/>
</svg>

＆＃13;

我将笔触颜色设置为红色，以便您可以看到它。如果你不需要中风，只需用＆＃34; stroke＆＃34;删除所有元素。

Svg在调整大小错误-SVG / CSS

1 个答案: