Включить SVG файл в SVG

У меня есть linearGradient в разделе defs моего SVG файла и ссылаюсь на него с помощью fill = "url (#myGradientName)". Это пока замечательно работает.

Я думаю, что я мог бы разместить весь раздел defs в собственном файле SVG, а затем просто ссылаться на все мои SVG-изображения. То есть, что-то вроде:

styles.svg:

<svg xmlns=...>
  <defs>
    <linearGradient id="myGradient" ...>
    </linearGradient>
  </defs>
</svg>

image.svg:

<svg xmlns=...>
  <rect width="100" height="100" fill="styles.svg#myGradient"/>
</svg>

Но я не могу заставить стиль применять. У меня неправильный синтаксис для идентификаторов, внешних по отношению к этому файлу (styles.svg # myGradient)? Нужно ли мне явно включать файл в первую очередь?

Я просматривал спецификацию SVG, и похоже, что это должно быть возможно, но ни один из примеров на самом деле не показывает, что это делается.

Изменить: FOP FAQ предполагает, что правильный синтаксис fill = "url (grad.svg # PurpleToWhite)", но это не означает, т работать в Gecko или Webkit. Правильно ли это, и никто не поддерживает его, или я делаю что-то еще не так?

Ответы

Ответ 1

Похоже, что это поддерживается только в Firefox 3.1.

Ответ 2

Вам нужно сказать fill="url(styles.svg#myGradient)". Это работает в Firefox 4 beta 6, и я думаю, что он работал в Firefox 3.5. Но Chrome (7.0.517.41 beta) и IE9 beta (9.0.7930.16406) все еще не поддерживают это. Похоже, что они ищут #myGradient в текущем документе, а не фактически идут по указанному URL. Гросс.

Вот полные файлы, которые я использовал для тестирования:

styles.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="black" />
    </linearGradient>
  </defs>
</svg>

image.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="url(styles.svg#myGradient)"/>
</svg>

Ответ 3

Я думаю, что, возможно, просто ответил на ваш вопрос в этой теме здесь.

Ответ 4

Собственно, часто задаваемые вопросы по FOP, правильный синтаксис охватывает URI с помощью url(...). Просто проверил мой Firefox, и он обрабатывает заполнение только окружающим url(). Это будет ошибка в Safari или Opera, если вы будете обрабатывать ее по-другому.

Я случайно поставил аналогичный вопрос, но с таким же небольшим успехом.

Приветствия,