Полигональные точки SVG с поддержкой процентных единиц

Я пытаюсь получить жидкий холст SVG, который может легко изменять размер. До сих пор я использую проценты везде. Однако, похоже, SVG polygon и path не поддерживают проценты в атрибуте point. Вот пример:

(jsFiddle)

<svg width='90%' height='90%' style='background-color: whitesmoke'>
    <rect x='40%' y='40%' width='25%' height='25%' />

    <polygon points="0,0 0,100 30,20 30,0" />
    <polygon points="30,0 30,20 60,0 60,0" />
    <polygon points="60,0 60,0 90,30 90,0" />
</svg>

Однако, если я начну менять числа в атрибуте points на проценты, он терпит неудачу с ошибкой синтаксического анализа в консоли. Я ищу способ иметь многоугольник, который может изменять размер с помощью элемента <svg>.

Ответ 1

Используя viewBox и элемент контейнера (любого размера), я думаю, вы можете добиться эффекта, который вы ищете: http://jsfiddle.net/davegaeddert/WpeH4/

<div id="svg-container" style="width:100%;height:100%;">
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <rect x='40%' y='40%' width='25%' height='25%' />

        <polygon points="0,0 0,100 30,20 30,0" />
        <polygon points="30,0 30,20 60,0 60,0" />
        <polygon points="60,0 60,0 90,30 90,0" />
    </svg>
</div>

Если вы даете viewBox размер 0 0 100 100, тогда точки могут быть записаны как проценты, а форма будет масштабироваться с помощью svg.

Ответ 2

Вы можете группировать элементы вместе с g и использовать преобразование:

<svg width='90%' height='90%' style='background-color: whitesmoke'>
    <rect x='40%' y='40%' width='25%' height='25%' />

    <g transform="scale(0.4 0.4)">
        <polygon points="0,0 0,100 30,20 30,0"/>
        <polygon points="30,0 30,20 60,0 60,0"/>
        <polygon points="60,0 60,0 90,30 90,0"/>
    </g>
</svg>