SVG内联样式

Question

我试图通过css调整svg元素的大小，但不是缩小图像大小，而是将图片缩小一半，就像我将调整大小应用于容器元素一样...请查看{ {3}}

svg#gear {
   width:300px;
   height:300px;
   position:fixed;
   left:0%;
   top:50%;
}

Answer 1

您需要为<svg>元素提供一个viewBox属性来阻止这种情况发生。尝试使用viewBox =“0 0 1200 1200”开始并根据需要进行调整。

Answer 2

你必须为SVG元素定义高度和宽度属性..

svg#gear {
    height: 593px;
    left: 0;
    position: fixed;
    top: 50%;
    width: 593px;
}

此外，如果视口和视图框的宽高比（宽高比）不同，则需要指定preserveAspectRatio元素的<svg>属性。

例如在你的情况下。

<svg width="593px" height="593px" viewBox="0 0 1700 1700" preserveAspectRatio="xMinYMin meet"></svg>