html - 将 svg 放入容器中

Question

我将此 linkedin Logo 作为 svg，我正试图将其放入 div 元素中。但是，svg 无法正确缩放。 Logo 是方形的，因此我将 viewBox 设置为 100x100，并将宽度和高度设置为 100。结果是 Logo 被裁剪:仅显示一个 Angular 。知道我在这里做错了什么吗？

#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

由于您的坐标在 -1500 到 +1500 之间变化，您应该使该坐标或与您的视口(viewport)相似的坐标(原因是您的所有观点包含在视口(viewport)区域)，然后使用宽度和高度调整其大小为 100px。

这是一个演示:

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

<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>