Question

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

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

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

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

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

Answer 1

为容器提供viewBox属性，例如

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

它将随窗口调整大小。

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

使用SnapSVG的响应式SVG路径

2 个答案: