Question

我希望阻止<path>元素在preserveAspectRatio="none"标记上<svg>引起拉伸。我找到了几乎完美的解决方案，将此属性添加到<path>元素：

vector-effect="non-scaling-stroke"

但是我需要它们可以通过transform="scale()"进行扩展，这也是禁用的，或者更确切地说，它们的stroke-width是固定的，不可扩展。所以，我的问题是：有没有办法阻止拉伸而不是缩放？

好的，为了更清楚：https://codepen.io/lukydorny/pen/aNYOdW

我想用不同的viewBox宽度和高度（第二张图像）来塑造路径，但我需要水平线与垂直宽度相同（第三张图像）。然后我希望我能够以与原始路径（第4张图像）完全相同的方式缩放它，如上图所示，该路径被禁用。

有什么方法可以做到吗？

Answer 1

是的，你可以通过这样定义SVG元素来实现这个目的：

<svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="100%"
    height="100%"
    viewBox="0 0 1920 1080"
    style="display:block">

    ... your SVG paths code here

</svg>

注意＆＃34; viewBox＆＃34;大小应该是＆＃34; svg文档的大小＆＃34; （最大x和最大y值）。

这会保留您定义的宽高比;但是，请注意，您创建的路径应符合您定义的大小，否则可能会导致问题。

To＆＃34; zoom＆＃34;整个图形，只需改变宽度和宽度SVG元素或其父元素的高度，或使用＆＃34; scale（）＆＃34;在SVG内部，或像往常一样使用JavaScript。

防止preserveAspectRatio =＆＃34; none＆＃34;

1 个答案: