Question

我将这个linkedin徽标作为svg，我正试图融入div元素。但是，svg将无法正确缩放。徽标是方形的，因此我将viewBox设置为100x100，并且宽度和高度也设置为100.结果是徽标被裁剪：仅显示一个角。知道我在这里做错了吗？

#container {
  height: 100px;
  width: 400px;
  background-color: rebeccapurple;
}

<div id="container">
  <svg width="100" height="100" viewBox="0 0 100 100">
                    <path d="m 1227.06,212.93 h -213.44 v 334.187 c 0,79.731 -1.46,182.235 -110.983,182.235 -111.145,0 -128.164,-86.825 -128.164,-176.461 V 212.93 H 561.047 V 900.137 H 765.93 v -93.891 h 2.84 c 28.496,54.027 98.171,110.996 202.082,110.996 216.278,0 256.208,-142.336 256.208,-327.359 z M 320.344,994.082 c -68.457,0 -123.867,55.508 -123.867,123.868 0,68.3 55.41,123.8 123.867,123.8 68.277,0 123.765,-55.5 123.765,-123.8 0,-68.36 -55.488,-123.868 -123.765,-123.868 z M 427.09,212.93 H 213.496 V 900.137 H 427.09 Z M 1333.43,1440 H 106.289 C 47.6484,1440 0,1393.52 0,1336.21 V 103.91 C 0,46.5508 47.6484,0 106.289,0 H 1333.43 c 58.74,0 106.59,46.5508 106.59,103.91 v 1232.3 c 0,57.31 -47.85,103.79 -106.59,103.79" />
                </svg>
</div>

Answer 1

由于你的coordinates vary in between -1500 to +1500，你应该这样做或similar coordinates as your viewport（原因是你的所有点都包含在视口区中），然后使用宽度调整大小高度为100px。

以下是演示：

＆＃13;

#container {
  height: 100px;
  width: 400px;
  background-color: rebeccapurple;
}

＆＃13;

<div id="container">
  <svg width="100" height="100" viewBox="0 0 1500 1500">
                    <path d="m 1227.06,212.93 h -213.44 v 334.187 c 0,79.731 -1.46,182.235 -110.983,182.235 -111.145,0 -128.164,-86.825 -128.164,-176.461 V 212.93 H 561.047 V 900.137 H 765.93 v -93.891 h 2.84 c 28.496,54.027 98.171,110.996 202.082,110.996 216.278,0 256.208,-142.336 256.208,-327.359 z M 320.344,994.082 c -68.457,0 -123.867,55.508 -123.867,123.868 0,68.3 55.41,123.8 123.867,123.8 68.277,0 123.765,-55.5 123.765,-123.8 0,-68.36 -55.488,-123.868 -123.765,-123.868 z M 427.09,212.93 H 213.496 V 900.137 H 427.09 Z M 1333.43,1440 H 106.289 C 47.6484,1440 0,1393.52 0,1336.21 V 103.91 C 0,46.5508 47.6484,0 106.289,0 H 1333.43 c 58.74,0 106.59,46.5508 106.59,103.91 v 1232.3 c 0,57.31 -47.85,103.79 -106.59,103.79" />
                </svg>
</div>

＆＃13;

将svg装入容器中

1 个答案: