Question

我正在尝试使用SVG路径比例来适应整个容器元素，而不需要拉伸或修剪。 SVG如下所示。如您所见，它是一个简单的边框。

<svg preserveAspectRatio="none" viewBox="0 0 370 80" height="100%" width="100%">
    <path vector-effect="non-scaling-stroke" d="M359,70C359,70,300,70,185,70C84,70,9,70,9,70C9,70,9,60,9,40C9,24,9,10,9,10C9,10,84,10,185,10C300,10,359,10,359,10C359,10,359,24,359,40C359,60,359,70,359,70C359,70,359,70,359,70"/>
</svg>

然后我有一个可以有不同大小的元素，因为它是响应性的，因为我在宽度或高度可能不同的各种情况下使用它。我不能成功地让SVG通过始终保持在视口内来扩展其路径，而是在不保留纵横比的情况下进行缩放。这似乎不太合乎逻辑，但我尝试了各种选择但没有成功。

修改

通过设置我想要的任何尺寸，我能够扩展这个SVG。为什么第一个不起作用，但这可以改变呢？

<svg preserveAspectRatio="none" viewBox="0 0 404 77" height="100%" width="100%">
    <path vector-effect="non-scaling-stroke" d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>

Answer 1

简短的回答是否定的。你想做什么（据我所知）是不可能的。在SVG中，您可以缩放以适合容器（使用恒定的纵横比），或者您可以拉伸（忽略纵横比）。

目前无法保持SVG的某些部分静止并拉伸其他部分。当然，除非您使用Javascript来操纵SVG的内容。

您可能想要考虑使用SVG作为CSS border-image的源图像（请参阅http://www.w3.org/TR/css3-background/#border-images）。也许这就是你追求的那种东西？

展开SVG路径以适合所有维度的容器

1 个答案: