使用 SnapSVG 的响应式 SVG 路径答案

【问题标题】：Responsive SVG Path with SnapSVG使用 SnapSVG 的响应式 SVG 路径
【发布时间】：2014-01-24 00:58:15
【问题描述】：

是否可以使用 SnapSVG 获得响应式path？

我已经构建了以下 experiment on CodePen，我希望我的 path 能够响应。

我正在使用我的笔第 9 行上的以下代码构建我的路径：

var myPathC = snapC.path("M62.9 14.9c-25-7.74-56.6 4.8-60...

但是，我希望在调整浏览器窗口大小时响应或重新绘制这条路径。任何人都知道这是否可能和/或对如何处理它有任何想法？

【问题讨论】：

标签： javascript jquery css svg responsive-design

【解决方案1】：

给容器一个 viewBox 属性，例如

<svg id="svgC" width="100%" height="100%" viewBox="0 0 600 400"></svg>

它会随窗口调整大小。

【讨论】：

我应该看看这个：snapsvg.io/docs/#Snap.path.getBBox 吗？我并不是一个真正的 JS 奇才，所以很难理解 Snap 文档。也感谢您的回复！
您可以使用 getBBox 对路径应用变换。不过，这会导致更复杂的解决方案。
可爱，我已经更新了原始问题中的 CodePen 示例，并且可以正常工作。 viewBox 有点令人困惑，但我已经设法完成了我需要的工作。我想我会更多地使用 viewBox 以更好地理解它！
这个对我帮助很大

【解决方案2】：

我创建了一个响应视口建议的工作 svg。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
        .shapeDemo {
            min-height: 200px;
            width: 100%;
        }

        svg .purpleCircle {
            fill: darkmagenta;
            stroke: black;
            stroke-width:5;
        }

        svg .greenRectangle {
            fill: green;
            stroke: black;
            stroke-width: 5;
        }

        svg .redRectangle {
            fill: red;
            stroke: black;
            stroke-width: 5;
        }
    </style>
</head>
<body>
    <p>Responsive SVG sandbox</p>
    <svg class="shapeDemo" viewBox="0 0 600 400"> 
        <circle cx="75%" cy="10%" r="2.5%" class="purpleCircle"/>
        <circle cx="25%" cy="10%" r="1%" class="purpleCircle"/>
        <circle cx="50%" cy="22%" r="5%" class="purpleCircle"/>

        <rect x="20%" y="30%" width="10%" height="5%" class="redRectangle" />

        <rect x="45%" y="55%" width="10%" height="5%" rx="10" ry="10"
                    class="greenRectangle" />

        <ellipse cx="80%" cy="70%" rx="10%" ry="5%" />

        <polygon points="100,0 50,50 150,50"/>
    </svg>
</body>
</html>

【讨论】：