如何使用百分比统一缩放内联SVG？

Question

如何使用百分比统一缩放内联SVG？

7

我正在尝试在流体上下文中使用SVG元素，使用%单位将其大小设置成与容器成比例。

如果您像添加图像一样添加SVG设计，则它会像图像一样工作：

<img class="img-svg" src="box.svg" />

您可以使用CSS轻松地按比例缩放它，例如：

.img-svg { width:100%; height: auto; }

但是

如果您使用内联SVG，则一切都会改变...

<svg class="inline-svg" preserveAspectRatio="xMidYMid meet" viewBox="...">
    ...
</svg>

这样做是行不通的：

.inline-svg { display:block; width:100%; height: auto; }

如果您这样做，它将扩展SVG的框到100％，但其内部所有元素的大小都将保持不变。这里有一个jsfiddle链接：http://jsfiddle.net/s_d_p/jA62R/ 正确的方法是什么，使SVG内部的内容可以均匀地缩放？

注意1：我正在寻找CSS / SVG解决方案，而不是JavaScript hack。

注意2：我发现了这个，但它依赖于固定的px单位。

- emersonthis

3

只有在指定了viewBox的情况下，preserveAspectRatio才会生效。 - Robert Longson

@RobertLongson 很好的发现。我在示例中漏掉了它，但在我的实际代码中存在，但不起作用。你有什么想法为什么？ - emersonthis

2

在我的Chrome浏览器上似乎可以工作：http://jsfiddle.net/9K9b9/ - Matthias

1

@Matthias 那个演示在 Firefox 28.0 中也可以运行。 - Chris Baker

2个回答

2

您可以对SVG标签的内容应用svg变换。或者您也可以使用CSS3的transform方法。

.svg {width:100%; display:block;
transform:scale(5); 
-webkit-transform:scale(5); 
-moz-transform:scale(5); 
-ms-transform:scale(5); 
-o-transform:scale(5);
}

<svg class="svg" preserveAspectRatio="xMidYMid meet" viewbox="0 0 102 102">
<g transform="scale(0.5)">
/*rest code will come inside this.*/
</g>
</svg>

这是您的工作演示。http://jsfiddle.net/jA62R/10/

- Kheema Pandey

1

我可能没有理解你的回答，但是这并不清楚如何帮助我相对于容器宽度缩放内联svg。 - emersonthis

第二个例子（直接在SVG中进行转换）对我很有用：它可以像<g transform="scale(1.5) translate(0, -30)"> (...) </g>这样组合使用。 - Tomasz Gandor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- emersonthis · Accepted Answer

我还在努力理解这个问题，但是目前为止，我想到的最好的解决方法是...

CSS

.svg {
    display: block;
    width:100%;
    height: auto;
}

svg

<svg preserveAspectRatio="xMidYMid meet" viewBox="...">
...
</svg>

CSS需要将显示设置为块，因为SVG的默认值是内联的（不确定为什么）。然后，您可以像div一样缩放其边界。

使包含的SVG节点也能够很好地工作，还需要使用preserveAspectRatio属性。正如罗伯特在上面的评论中指出的那样，如果没有viewBox属性，preserveAspectRatio属性将无效。

值得阅读更多关于preserveAspectRatio的内容，因为有很多不同的值将决定缩放的元素与周围空间的交互方式，如果尺寸不同。例如，如果您的SVG是一个短宽矩形，而容器是一个高瘦矩形，浏览器应该如何处理额外的空间以使其适合？

[注意！浏览器对preserveAspectRatio的默认值差异很大！]