SVG перевод, кажется, ведут себя разные в Chrome/Chromium

https://jsfiddle.net/Lpfa9umq/SVG перевод, кажется, ведут себя разные в Chrome/Chromium

Код:

<svg> 
    <symbol> 
     <circle id="circle1" cx="50" cy="50" r="20" stroke="black" stroke-width="1" /> 
     <circle id="circle2" cx="25" cy="25" r="10" stroke="red" fill="red" stroke-width="1" /> 
    </symbol> 
</svg> 
<svg width="100" height="100"> 
    <use xlink:href="#circle1" /> 
    <svg width="50" height="50" transform="translate(20, 10)"> 
     <use xlink:href="#circle2" /> 
    </svg> 
</svg>

Преобразование атрибут применяется в Firefox, но не в Chrome/Chromium, почему? Я использую это неправильно?

источник

2015-07-20 lupor

<svg> в пределах <svg> смущает браузер. Вместо этого используйте тег <g>.

<g transform="translate(20, 10)"> 
    <use xlink:href="#circle2" /> 
</g>

источник

2015-07-20 19:41:28

'' работает, но не рекомендуется, так как вы можете захотеть сгруппировать «circle2» с другими объектами в рамках одного и того же преобразования. –

Спасибо за ваш ответ, он работает. Но почему svg внутри svg «запутывает»? – lupor

Может быть ошибка Chrome, но вы попытались добавить некоторые теги SVG (например: 'viewBox' и' preserveAspectRatio', 'x' и' y' для встроенного SVG). Впервые увидев эту ошибку, я не использую 'symbol' слишком часто, поскольку' use' не работает в некоторых версиях Safari. –

В SVG 1.1 <svg> элементы не принимают преобразования атрибутов. В SVG 2 это proposed that they should.

Chrome и Firefox экспериментируют с реализацией предлагаемых частей спецификации SVG 2. Некоторые вещи реализованы только Firefox, а другие - только Chrome. Большинство из них не реализованы вообще, и некоторые функции реализованы обоими. Сама спецификация SVG 2 не завершена.

В данном конкретном случае Firefox реализовал функцию SVG 2, но Chrome не имеет.

Вы можете достичь того же результата в браузерах, которые не поддерживают эту функцию SVG 2 либо путем замены <svg> элемента на <g> элемента или путем создания <svg> дочернего элемента на <g> элемента и положить преобразования на <g> элемента.

источник

2015-08-21 07:03:21

mmh преобразование элемента svg происходит в координатном пространстве его родительского элемента, тогда как преобразование в содержащем g элементе произойдет в координатном пространстве самого элемента svg. это становится видимым, когда вы используете viewBox для внутреннего элемента svg. Итак, вы должны поместить элемент g, который содержит преобразование вокруг элемента svg. –

viewBox применяется только к детям. viewBox и преобразование вместе делают это более очевидным. –

прошу взглянуть на эту скрипту, чтобы увидеть, что я имею в виду ... https://jsfiddle.net/at8cdjo0/ –

SVG перевод, кажется, ведут себя разные в Chrome/Chromium

ответ

Смежные вопросы