it-roy-ru.com

Вставить SVG в SVG?

У меня есть документ SVG, и я хотел бы включить в него внешнее изображение SVG, то есть что-то вроде:

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

(«объект» - только пример - внешний документ будет SVG, а не xhtml).

Есть идеи? Это вообще возможно? Или мне лучше всего просто добавить logo.svg xml в мой внешний SVG-документ?

68
Marcin

Используйте элемент image и укажите свой файл SVG. Для развлечения сохраните следующее как recursion.svg:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>
102
Phrogz

Или вы можете встроить дочерний svg в родительский svg следующим образом: 

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

демо:
http://hitokun-s.github.io/demo/path-between-two-svg.html

68
toshi

Стоит отметить, что когда вы встраиваете SVG в другой SVG с помощью:

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

тогда внедренный SVG принимает прямоугольную форму с заданными размерами.

То есть, если встроенный SVG представляет собой круг или какую-либо форму, отличную от квадрата, он становится квадратом с прозрачностью. Поэтому события мыши попадают в этот встроенный квадрат и не достигают родительского SVG. Остерегайтесь этого.

Лучшим подходом является использование шаблона. Чтобы заполнить форму, или круг, квадрат или даже путь.

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

Затем используйте шаблон следующим образом:

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

Теперь ваши события мыши не застревают в прозрачных квадратах изображения!

26
oabarca

Мне нужно было встроить SVG в мой SVG, но также изменить его цвет и применить преобразования.

Только Firefox поддерживает атрибут transform для вложенных элементов SVG. Изменение цвета <изображения> также невозможно. Таким образом, комбинация обоих была необходима.

В итоге я сделал следующее

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

Это работает как минимум на Firefox, Chrome и Inkscape.

Это ведет себя так же, как дочерний svg в родительском svg-ответе, за исключением того, что теперь вы можете применить к нему преобразования.

1
Christiaan

Я обнаружил, что использование тега <image> дает низкокачественный рендер встроенного файла. Однако сработал следующий метод (для встраивания SVG-файла в SVG-файл - не обязательно для рендеринга на HTML-странице):

  • Отредактируйте файл SVG в текстовом редакторе.

  • Найдите конец метаданных:

    </metadata>
      <g
       id="layer1"
       inkscape:groupmode="layer"
       inkscape:label="Layer 1">
    
  • Вставьте эту строку после тега группы:

    <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />
    
  • В этом случае мы включаем OTHERFILE.svg в файл и все layer1 (первый слой и слой по умолчанию).

  • Сохраните это, а затем откройте файл в Inkscape.

Этот метод полезен для стандартного фона или логотипа на каждой странице. Поместив его первым в файл, он будет отображен первым (и, следовательно, снизу). Вы также можете заблокировать его, добавив этот атрибут:

sodipodi:insensitive="true" 

Другими словами:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />
0
Nick Gammon