Question

如何调整内联svg矢量图片的大小，仅使用CSS ，因此所有艺术品都会调整大小并完全适合其较小的定义宽度＆amp;高度？应保留原始方面。在这种情况下，我希望艺术作品内容调整为100x100px框作为图标。下面的片段不起作用，因为它似乎只是在CROP窗口而不是调整内部内容的大小...什么CSS代码为SVG做了什么？

svg {
  width:  100px;
  height: 100px;
  fill:   blue;
  background-color: red;
}

<svg>
	<polygon points="100,0 30,200 200,70 0,70 170,200"/>
</svg>

<svg >
	<polygon points="0,0 200,140 110,200"/>
</svg>

<svg>
	<ellipse cx="200" cy="70" rx="200" ry="40" />
</svg>

Answer 1

添加viewBox以保持宽高比并设置100％的高度和宽度以填充svg容器。

svg{
  width:100px;
  height:100px;
  background-color: red;
}
svg * {
  width:  100%;
  height: 100%;
  fill:   blue;
}

<svg viewbox="0 0 200 200">
  <polygon points="100,0 30,200 200,70 0,70 170,200"/>
</svg>

<svg viewbox="0 0 200 200">
  <polygon points="0,0 200,140 110,200"/>
</svg>

<svg viewbox="0 0 400 70">
  <ellipse cx="200" cy="70" rx="200" ry="40" />
</svg>

如何仅使用css调整svg内容的大小？

1 个答案: