Преобразование SVG внутри SVG - PullRequest
Новая
       9

Преобразование SVG внутри SVG

0 голосов
/ 25 октября 2018

Хорошо, у меня есть два примера.Во-первых, это один svg, к которому я применяю преобразование, чтобы перевернуть svg по горизонтали:

http://jsfiddle.net/p3L95rcb/

<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 (созданс привязкой 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?Я немного застрял на этом, поэтому некоторая помощь может оказаться полезной.

1 Ответ

0 голосов
/ 04 апреля 2019

использовать <<strong> символ > элемент 

<!-- 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>
...