Отзывчивый путь SVG с SnapSVG

Question

Отзывчивый путь SVG с SnapSVG

0

Возможно ли иметь ответный path с помощью SnapSVG?

Я построил следующий эксперимент на CodePen, любой, которого я хочу, чтобы мой path был отзывчивым.

Я строю свой путь, используя следующий код в строке 9 моего пера:

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

Однако именно этот путь я хочу реагировать или повторно рисовать при изменении размера окна браузера. Кто-нибудь знает, если это возможно и/или есть идеи о том, как подойти к нему?

Matt 06 янв. 2014, в 16:58

Источник

Теги:

javascript

jquery

css3

svg

responsive-design

2 ответа

0

Я создал рабочий 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>

Jason Pease 05 июнь 2014, в 15:39

Ещё вопросы

Robert Longson · Accepted Answer · 2014-01-06T14-03-00.000Z

Дайте контейнеру атрибут viewBox, например

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

и он изменит размер с помощью окна.

я должен смотреть на это: snapsvg.io/docs/#Snap.path.getBBox ? Я на самом деле не специалист по JS, так изо всех сил пытающийся осмыслить Snap Documentation. Спасибо за ответ также!
Вы можете использовать getBBox, чтобы применить преобразование к пути. Это привело бы к более сложному решению, хотя.
Прекрасно, я обновил пример CodePen в исходном вопросе, и он работает. viewBox немного сбивает с толку, но мне удалось выполнить то, что мне нужно. Я буду играть с viewBox немного больше, чтобы лучше понять это, я думаю!