JavaScript - есть ли способ нарисовать SVG-путь ПОД содержимым?

Мне нужен путь, который идет ПОД содержимым (текстом) - есть ли способ, как это сделать?

(как уже было сказано где-то еще, z-index не влияет на пути svg)


javascript svg jquery css jquery-svg
person jave.web    schedule 09.10.2013    source источник
comment
Объявить текст после объявления пути   -  person Taron Mehrabyan    schedule 09.10.2013
comment
Невозможно - пути создаются взаимодействием с пользователем (соединяющим два элемента) - поэтому текст должен быть там до этого   -  person jave.web    schedule 09.10.2013
comment
Вы говорите, что z-Index не влияет, но если вы объявите пути и текст в разных слоях svg, z-index будет работать.   -  person Taron Mehrabyan    schedule 09.10.2013
comment
Это проблема SVG z-idnex VS HTML z-index, которую я обнаружил :) спасибо за решение :) (на самом деле вы решили два моих вопроса одновременно x))   -  person jave.web    schedule 09.10.2013

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете объявить PATH и TEXT в разных SVG слоях и поместить один слой на другой вот так

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;z-index:1">
  <text x="100" y="15" fill="red">I love SVG</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;z-index:0">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

http://jsfiddle.net/WJZrU/

person Taron Mehrabyan    schedule 09.10.2013
comment
Это очень интересное решение :) Я даже не знал, что можно просто поместить текст в SVG :) - person jave.web; 09.10.2013
comment
Да, советую максимально разделять графическую часть и текстовое наполнение :) - person Taron Mehrabyan; 09.10.2013
comment
Текст не обязательно должен быть в формате SVG. Вы по-прежнему можете использовать HTML для этой части. См.: jsfiddle.net/WJZrU/5. - person Paul LeBeau; 09.10.2013