Question

＆lt; p＆gt;我采取了不寻常的步骤，将Adobe Illustrator文件转换为svg以显示为独立图像。我想为它添加一层交互性 - 当用户点击/鼠标悬停在图形的一部分上时，我想要一个弹出窗口来显示保存在svg中的标签中的信息。＆LT; / p为H. ＆lt; p＆gt;以下是svg部分的示例：＆lt; / p＆gt; ＆LT;预＆GT;＆LT;代码＆GT; ＆LT g取代; ＆lt; path class =“st2”d =“M128.3,829.3c-33.4-4.2-57-34.6-52.8-67.9c1.8-14,8.4-27,18.7-36.7l26.5,28.2c-8.9,8.4 -9.4,22.4-1,31.3 c3.5,3.8,8.3,6.2,13.4,6.8L128.3,829.3z“＆gt; ＆lt; title＆gt; White：36＆lt; / title＆gt; ＆LT; /路径＆GT; ＆lt; text transform =“matrix（0.9523 -0.309 0.3094 0.9509 85.6259 788.8041）”class =“st3 st11 st13”＆gt; White＆lt; / text＆gt; ＆lt; text transform =“matrix（0.9523 -0.309 0.3094 0.9509 85.6259 788.8041）”class =“st4 st11 st13”＆gt; White＆lt; / text＆gt; ＆LT; / g取代; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;路径之间的类不同，但我可以在那里添加另一个类。＆lt; / p＆gt; ＆lt; p＆gt;这是我已经达到的代码：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt;＆lt;！doctype html＆gt; ＆LT; HEAD＆GT; ＆lt; title＆gt;交互性测试＆lt; / title＆gt; ＆lt; script src =“http://code.jquery.com/jquery-1.11.0.min.js”＆gt;＆lt; / script＆gt; ＆LT;风格＆GT; .race-number { font-size：59px; } ＆LT; /风格＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆lt; div class ='test-box'＆gt;＆lt; / div＆gt; ＆LT;脚本＆GT; $ .get（'Test_int_2-01.svg'，function（data）{ $（document.body的）.append（data.documentElement）; 在里面（）; }）; function init（）{ $（ '路径'）。点击（函数（）{ 的console.log（$（本）[0] .innerHTML）; }）; } ＆LT; /脚本＆GT; ＆LT; /体＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;鼠标悬停在路径上时，它已经自动显示标题，但我认为这是默认设置，而不是此处的任何结果。＆lt; / p＆gt; ＆lt; p＆gt;那么如何访问innerHTML并显示它呢？最好用HTML或CSS来设置样式吗？＆LT; / p为H.

Answer 1

编辑：这是自动执行此操作的脚本。

仅当svg路径按此顺序排列时（路径＆gt; text＆gt; path＆gt; text ...）

var svg = document.getElementById("svg")
var count = svg.children.length
var index = []

var reveal = function(a){
	var text = index[a]
	svg.appendChild(text)
}
var hide = function(a){
	var text = index[a]
	text.remove()
}

var n = 0
while(n<count-1){
	svg.children[n].setAttribute("id", n)
	var nn = n+1
	svg.children[nn].setAttribute("id", nn)
	index.push(svg.children[nn])
	n+=2
}
var q = 1
	while(q<=count){
	document.getElementById(q).remove()
	q+=2
	}
var nnn = 0
	while(nnn<index.length){
	svg.children[nnn].setAttribute("onmouseover", "reveal("+nnn+")")
	svg.children[nnn].setAttribute("onmouseout", "hide("+nnn+")")
	nnn++
}

<svg height="1000" width="1000" id="svg">

        <path 
		d="M 50,50, 75,50 75,75 50,75 z"
		fill="yellow">
        </path>
        <text x="50" y="50" style="fill:gold;">gold</text>
		
		<path 
		d="M 500,200, 700,200 700,400 500,400 z"
		fill="blue">
        </path>
        <text x="600" y="300" style="fill:black;">Black</text>
		
		<path 
		d="M 200,200, 400,200 400,400 200,400 z"
		fill="red">
        </path>
        <text x="300" y="300" style="fill:white;">White</text>
		
		
		<path 
		d="M 500,200, 700,200 700,400 500,400 z"
		fill="blue">
        </path>
        <text x="600" y="300" style="fill:black;">Black</text>
</svg>

在弹出框中显示SVG <title>：访问innerHTML

1 个答案: