Responsive SVG Path with SnapSVG

问题

Is it possible to have a responsive path using SnapSVG?

I have built the following experiment on CodePen, any i want my path to be responsive.

I'm building my path using the following code on line 9 of my pen:

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

However it is this path that i wish to be responsive or re-drawn when the browser window is resized. Anyone know if this is possible and/or have any ideas on how to approach it?

回答1:

Give the container a viewBox attribute e.g.

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

and it will resize with the window.

回答2:

I've created a working svg that is responsive following the viewport suggestion.

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

来源：https://stackoverflow.com/questions/20953076/responsive-svg-path-with-snapsvg

标签

javascript

jquery

css3

svg

responsive-design