Зачем встраивать элемент <svg> внутри другого элемента <svg>?

Почему демо: http://jsbin.com/ejorus/2/edit, имеет элемент <svg>, вложенный внутри другого элемента <svg>?

<svg class="graph">
    <svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <g transform="translate(30,0)">
            <!-- ... -->
        </g>
    </svg>
</svg>

JS Bin - это модифицированная версия демо в этом сообщении в блоге: http://meloncholy.com/blog/making-responsive-svg-graphs/

Ответ 1

Вы правы (как вы говорите в Mr. Alien answer), что оба элемента SVG имеют одинаковые относительные позиции, и, действительно, график отлично отображает внешний SVG.

Причина, по которой я добавил, заключается в том, что JavaScript (который мне нужен, чтобы прекратить сбрасывание меток) использует элемент SVG transform matrix ( вызванный прикладным атрибутом viewBox), чтобы отключить текст.

К сожалению, возвращаемая матрица не учитывает преобразования, применяемые к самому элементу SVG, поэтому мне нужно было получить матрицу преобразования относительно внешнего элемента, который использовал начальная система координат. Надеюсь, это поможет.

Ответ 2

Вложенные элементы SVG могут быть полезны для группировки SVG-фигур вместе и позиционируйте их как коллекцию. Все формы, вложенные внутри элемента svg будет positioned (x, y) relative to position (x, y) его охватывающий элемент svg. Перемещая координаты x и y вложенный элемент svg, вы также перемещаете все вложенные фигуры.

Вот пример, где два прямоугольника вложены внутри двух svg элементы. За исключением цветов два прямоугольника имеют одинаковые определения для x, y, height и width. Вложенный svg элементы имеют разные значения x. Поскольку x-positionпрямоугольники интерпретируются относительно их входящих элементов svg x-position, два прямоугольника отображаются на разных х-позиции.

- Якоб Дженков

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#009900; fill: #00cc00"/>
  </svg>
</svg>

Кредиты

Ответ 3

Вы можете определить новые viewport и viewbox. С помощью этой опции вы можете использовать относительные позиции, например, как css. Для получения дополнительной информации вы можете увидеть эту онлайн-статью .

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Nested SVG</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <svg width="100%" height="100%">
        <rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" />
        <svg x="25%" y="25%" width="50%" height="50%">
            <rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" />
        </svg>
    </svg>
</body>

</html>