Question

我一直在尝试在一些最新的项目中使用SVG，并且由于它可以扩展，我想知道你对这些SVG的动态高度和宽度有什么看法？

到目前为止，我已经从Illustrator导出图形，将它们保存为SVG，打开SVG并删除了doctype和＃layer_1等ID。然后我将高度和宽度属性编辑为100％。所以我通过在父节点上设置宽度和/或填充来调整SVG的大小。这样可以轻松地使用媒体查询调整大小。以及CSS过渡。但我不确定这是最好的方法。

我的HTML就像这样：

<div class="svg icon_phone">
  <img src="static/icon_phone.svg">
</div>

<div class="svg">
  <img src="static/icon_other.svg">
</div>

像这样的CSS：

.svg {
  width: 60%;
}

.icon_phone {
  padding-left: 80px;
}

SVG看起来像这样：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     height="100%" width="100%" viewBox="0 0 97 94.5" enable-background="new 0 0 97 94.5" xml:space="preserve">
<circle fill="#5B2B6E" cx="48.63" cy="47.125" r="42.75"/>
<g>
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="48.85" y1="47.125" x2="26.41" y2="47.125"/>
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="70.85" y1="47.125" x2="58.25" y2="47.125"/>
    <polyline fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" points="44.794,65.51 26.41,47.125 44.794,28.74   
        "/>
</g>
</svg>

我不知道这对于做事情是否是一个好方法，因为它们在IE和某些浏览器中表现得很奇怪，除非我专门在其父级上设置宽度和高度。一些SVG伸展，一些高峰都搞砸了。但在Chrome中，一切都很好。

最好的选择是什么？

Answer 1

最好从svg本身删除高度和宽度（以及x，y和viewBox，如果需要）属性，并在css中使用宽度和高度。例如：

.parent svg {
   width: 100%;
   heigth: 100%;
}

.parent {
   width: 100px;
   height: 50px;
}

或者：

.parent svg {
   width: 100px;
   heigth: 50px;
}

因此，您可以轻松地使一切响应。

关于高度和宽度的最佳实践使用SVG？

1 个答案: