Как установить статический размер SVG для ``элемент под``элемент, который получает преобразование attr - PullRequest
Новая
       7

Как установить статический размер SVG для ``элемент под``элемент, который получает преобразование attr

0 голосов
/ 11 декабря 2018

Основной вопрос:

Есть ли способ установить статическую ширину и высоту для элементов <g>, чтобы на них не влиял атрибут transform, выполненный в его родительском элементе view-box <svg>?

т.е.

<svg id="viewbox" transform="translate(1,5)scale(2)"> // continuously gets the transform attr via js upon zoom event <g> <path "the shape of a triangle"/> <path same/> <path same/> <path same/> <path same/> </g> </svg>

Я хочу, чтобы все под элементом <g> преобразовывалось в соответствии со значениями преобразования события масштабирования, которые получает окно просмотра <svg>, но не масштабировать размеры элемента <g>.Таким образом, похоже, что экран масштабируется в одну часть окна просмотра, но без изменения размеров элементов <g>.

1 Ответ

0 голосов
/ 12 декабря 2018

Вместо непосредственного применения преобразований к тегу элемента svg ( svg ), вы можете использовать групповой тег ( g ) для перевода всего и тег прямоугольника ( rect) для масштабирования только вашей 'viewbox'. 

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(1, 5)">
        <rect 
            id="viewbox"
            fill="black"
            width="100"
            height="100"
            transform="scale(2)" />
        <!-- your elements down here -->   
        <rect
            fill="grey"
            width="20"
            height="20"
            x="10"
            y="10" />
    </g>
</svg>

Надеюсь, эта помощь:)

...