17 мая 2013 в 21:45
Пытаюсь сделать всплывающие подсказки на векторных элементах SVG, но пока безуспешно.
То есть есть произвольный элемент SVG в файле example.svg (к html он подключается при помощи тега object):
<path
d="M 206.42857,85.714285 C 205.85593,82.703651 z"
id="path3017"/>
d="M 206.42857,85.714285 C 205.85593,82.703651 z"
id="path3017"/>
,
Имеется виджет Jquery toolpit. В обычной ситуации работал бы следующий код:
$("необходимый элемент").tooltip({
track: true,
delay: 0,
showBody: "::",
opacity: 0.85
});
track: true,
delay: 0,
showBody: "::",
opacity: 0.85
});
Но этому виджету надо добраться до кода в файле SVG. То есть код должен поменяться на что-то вроде:
$(svgdom.getElementsByClassName("необходимый элемент")).tooltip({
track: true,
delay: 0,
showBody: "::",
opacity: 0.85
bodyHandler: function() {
return $($(this).attr("href")).html();
}
track: true,
delay: 0,
showBody: "::",
opacity: 0.85
bodyHandler: function() {
return $($(this).attr("href")).html();
}
Есть идеи, какой код должен получиться в итоге?
Комментарии
В SVG можно задать всплывающие подсказки для группы элементов.
Пример фрагмента кода SVG:
<line class="atr2" x1="320" y1="250" x2="370" y2="250"/>
<line class="atr2" x1="320" y1="290" x2="370" y2="290"/>
<line class="atr2" x1="370" y1="250" x2="370" y2="290" marker-start="url(#DimPoint2)" marker-end="url(#DimPoint1)"/>
<text x="365" y="270" transform="rotate(-90, 365, 270)" font-size="7mm" text-anchor="middle">40</text>
<title>dimL1 Demo</title>
</g>
в теге <title> задаём текст подсказки
Работающий пример - Чертёж в SVG
Наведите курсор на размер 40.
Для группы можно задать свойство id и по нему находить и менять текст подсказки.