如何正确缩放 SVG 以覆盖 90% 的屏幕

Question

我的 html 代码中内嵌了一个 SVG 图像（一个矩形）

<svg id="theSVG" preserveAspectRatio="xMinYMin slice" overflow="visible" ... >
  <polyline id="theElement">...</polyline>
</svg>

然后我尝试使用 jQUery 和 velocity.js 对其进行动画处理，以填充除一个边缘以外的所有屏幕（大约 90%/90% 右侧/底部）。看起来像这样：

...
$("theSVG").velocity({scale: 10}, {duration: 1000});

这个解决方案有两个问题：

• 如何缩放它以完全适合屏幕的 90%？
• 如果比例大于 2-3 左右，SVG 的边缘会变得模糊。我读到如果您不直接针对 SVG，就会发生这种情况（但我正在这样做？！）

有什么好的解决办法吗？

我还尝试将 svg 设置为 100%/100% 并使用视口并稍后将其放大...但我似乎无法在那里使用百分比..

Answer 1

您是否简单地尝试过使用width 属性或style 的width 属性？

<svg id="theSVG" width="90%" overflow="visible" ... >
    <polyline id="theElement">...</polyline>
</svg>

或

<svg id="theSVG" style="width:90%;" overflow="visible" ... >
    <polyline id="theElement">...</polyline>
</svg>

Similar Q/A.

再说一次，CSS 可能是照常使用的方式：

body, html
{
    height: 100%;
    width: 100%;
}

#theSVG
{
    width: 90%;
}