html - 为 web 缩放 SVG

Question

我一直在学习 SVG，这就是我目前所拥有的:http://jsfiddle.net/C8d34/1/

这是我的 SVG 代码:

<svg width="100%" height="100%">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

我的问题是，为什么我的 SVG 没有扩展到浅蓝色区域的 100% 高度和宽度，因为这是我试图通过我的代码实现和期望的。

Answer 1

宽度声明不是定义因素。它定义了 SVG 的大小，但您需要通过 viewbox

建立坐标限制

在这种情况下，我认为你有一个 100 x 100 的正方形，所以你的 View 框声明将像这样

HTML

<svg viewBox="0 0 100 100"> /* this here */
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

现在您可以将 SVG 的宽度设置为任何您喜欢的宽度，SVG 将自动缩放以适应该尺寸。

CSS

svg {
    width:50%;
    height:50%;
}

结果你得到了这个

JSFiddle Demo

如果您没有定义任何尺寸，它将像这样缩放到父级的 100%

JSFiddle Demo 2

另请参阅 - svg viewBox attribute