Image 为SVG创建工具提示<;图像>;标签
我试图创建一个工具提示,当用户将鼠标悬停在图标上方时,该工具提示将提供有关事件的信息。标记位于SVG图像中 这是图像的代码:Image 为SVG创建工具提示<;图像>;标签,image,svg,tooltip,Image,Svg,Tooltip,我试图创建一个工具提示,当用户将鼠标悬停在图标上方时,该工具提示将提供有关事件的信息。标记位于SVG图像中 这是图像的代码: <image class="tooltip-trigger" data-tooltip-text="Battles" id="Battles" x="100" y="200" width="30" height="30" xlink:href="battle.png" /> <g id="tooltip" visibility="hidden" &
<image class="tooltip-trigger" data-tooltip-text="Battles" id="Battles" x="100" y="200" width="30" height="30" xlink:href="battle.png" />
<g id="tooltip" visibility="hidden" >
<rect x="2" y="2" width="80" height="24" fill="black" opacity="0.4" rx="2" ry="2"/>
<rect width="80" height="24" fill="white" rx="2" ry="2"/>
<text x="3" y="6">Tooltip</text>
</g>
<script type="text/ecmascript"><![CDATA[
(function() {
var svg = document.getElementById('tooltip-svg-5');
var tooltip = svg.getElementById('tooltip');
var tooltipText = tooltip.getElementsByTagName('text')[0].firstChild;
var triggers = svg.getElementsByClassName('tooltip-trigger');
for (var i = 0; i < triggers.length; i++) {
triggers[i].addEventListener('mousemove', showTooltip);
triggers[i].addEventListener('mouseout', hideTooltip);
}
function showTooltip(evt) {
var CTM = svg.getScreenCTM();
var x = (evt.clientX - CTM.e + 6) / CTM.a;
var y = (evt.clientY - CTM.f + 20) / CTM.d;
tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
tooltip.setAttributeNS(null, "visibility", "visible");
tooltipText.data = evt.target.getAttributeNS(null, "data-tooltip-text");
}
function hideTooltip(evt) {
tooltip.setAttributeNS(null, "visibility", "hidden");
}
})()
]]></script>
工具提示
加载时,工具提示不会出现您的代码正在工作。您可能遇到的问题是,工具提示主要出现在svg元素之外。我添加了
溢出:可见代码>到svg元素,现在您可以看到工具提示
(函数(){
var svg=document.getElementById('tooltip-svg-5');
var tooltip=svg.getElementById('tooltip');
var tooltipText=tooltip.getElementsByTagName('text')[0]。firstChild;
var triggers=svg.getElementsByClassName('tooltip-trigger');
对于(var i=0;i
svg{边框:1px实心;溢出:可见;显示:块;边距:自动}
工具提示
图像代码:工具提示就像一个符咒!另一个问题是,我希望工具提示文本显示在不同的行中,但是
不起作用:数据工具提示文本=\“”+id+“
位置:“+Location+”
结果:“+Result+“有什么建议吗?你说得对。
无法与svg
一起使用。您将需要使用。请尝试以下操作:27位置:巴塞罗那结果:结果
。如果这没有帮助,请提出另一个问题。