Преобразовать SVG внутрь SVG
Итак, у меня есть два примера. Сначала это один svg, к которому я применяю преобразование, чтобы перевернуть svg по горизонтали:
<svg id = "Layer_1" data-name = "Layer 1" xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 109.55 40.51" transform = "scale(-1,1)">
Во-вторых, тот же svg, только теперь он заключен в другой svg (созданный с помощью snap svg):
http://jsfiddle.net/dFTtd/650/
<svg id = "combinationDrawSvg" width = "100%" height = "254" class = "overlap-annotations"><g transform = "matrix(1,0,0,1,0,0)"><svg id = "Layer_1" data-name = "Layer 1" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 109.55 40.51" transform = "scale(-1,1)">
Теперь, если я применяю то же преобразование к внутреннему svg, преобразование не применяется. Любые мысли о том, почему преобразование работает в примере 1, а в примере 2 - нет? Я как бы застрял на этом, так что некоторая помощь может быть полезна.
Чтобы расширить то, что сказал Роберт, если вы оберните рисунок в свой внутренний svg с помощью <g/> и примените к нему преобразование, это сработает. Преобразования вложенных тегов <svg/> делают браузеры раздражительными
Я бы use первый svg во втором через <use xlink:href = "#Layer_1"/> и применил преобразование к оригиналу. Как правило, не очень хорошая практика (насколько я знаю) встраивать svg непосредственно в svg, хотя я бы порекомендовал подробнее об этом от Роберта.
@RobertLongson: если я попробую это во втором примере, изображение исчезнет. Или это потому, что svg находится за пределами экрана?
@ChrisW. мы объединяем несколько svg в один, поэтому нам нужно встраивать svg друг в друга ...
@WillemvanBeem Конечно, но лучше всего было бы создать базовый svg с библиотекой defs и реализовать их с помощью useнравится.
@WillemvanBeem, правильно, это вне области просмотра.
@RobertLongson Я все еще не понимаю, как это исправить. Вы можете показать мне, как это исправить во второй скрипке?
Тед предоставил более подробную информацию в комментарии после моего, с какой проблемой вы сталкиваетесь, подписавшись на них?
Теперь у меня в firefox работает следующее: <g> <svg xmlns = "w3.org/2000/svg" viewBox = "0 0 406.93 140.65" preserveAspectRatio = "none" width = "341.38235294117646" height = "129.6115" x = "184.8416176470588" y = "76.507903" style = "transform-origin: 275.576904296875px; transform: scale (-1, 1);"> Но в Chrome это работает, только если я помещаю стиль в <g>, но это не вариант, поскольку есть больше элементов внутри группы, и я хочу отразить только один из них. Есть мысли о том, как заставить это решение работать как в Firefox, так и в Chrome?
Ответы 1
используйте элемент <условное обозначение>
<!-- id with lowercase -->
<symbol id = "layer_1" data-name = "Layer 1" preserveAspectRatio = "xMidYMid meet" viewBox = "0 0 109.55 40.51">
<!-- your paths -->
</symbol>
<g transform = "matrix(1,0,0,1,0,0)">
<use xlink:href = "#layer_1" x = "0" y = "0" transform-origin = "50% 50%" transform = "scale(-1, 1)" />
</g>
Вы пробовали это в Firefox? Не все браузеры поддерживают преобразование элемента <svg>, но Firefox поддерживает. Для кроссбраузерной поддержки используйте элемент <g> вместо элемента <svg>.