jquery - 如何正确缩放 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属性或width属性style？

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

类似的问答。

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

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

#theSVG
{
    width: 90%;
}