我可以 link svg 中的两个元素,以便将鼠标悬停在一个元素上会更改另一个元素的属性吗?
Can I link two elements in svg such that mousing over one changes an attribute of the other?
假设我有 2 个 svg 元素,一个圆圈和一些文本:
<svg version="1.1" width="500" height="500" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="1000" cy="1000" r="50" />
<text x="900" y="900" style="font-size:100px">Test</text>
</svg>
接下来,我希望文本仅在鼠标悬停时出现,我可以这样做:
<svg version="1.1" width="500" height="500" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="1000" cy="1000" r="50" />
<text x="900" y="900" style="font-size:100px" opacity="0" onmouseover="evt.target.setAttribute('opacity', '1');" onmouseout="evt.target.setAttribute('opacity', '0');">Test</text>
</svg>
是否可以 link 圆圈和文本,以便将鼠标悬停在任何一个上都会导致文本可见,同时在所有情况下都保持圆圈可见?
根据 Robert Longson 的有用评论,这里有一个 JavaScript 解决方案:
<svg version="1.1" width="500" height="500" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="circle" cx="1000" cy="1000" r="50" />
<text id="text" x="900" y="900" style="font-size:100px" opacity="0">Test</text>
<script>
<![CDATA[
var circle = document.getElementById("circle");
var text = document.getElementById("text");
circle.addEventListener("mouseover",function(event){
text.setAttribute('opacity',1);
})
circle.addEventListener("mouseout",function(event){
text.setAttribute('opacity',0);
})
]]>
</script>
</svg>
假设我有 2 个 svg 元素,一个圆圈和一些文本:
<svg version="1.1" width="500" height="500" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="1000" cy="1000" r="50" />
<text x="900" y="900" style="font-size:100px">Test</text>
</svg>
接下来,我希望文本仅在鼠标悬停时出现,我可以这样做:
<svg version="1.1" width="500" height="500" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="1000" cy="1000" r="50" />
<text x="900" y="900" style="font-size:100px" opacity="0" onmouseover="evt.target.setAttribute('opacity', '1');" onmouseout="evt.target.setAttribute('opacity', '0');">Test</text>
</svg>
是否可以 link 圆圈和文本,以便将鼠标悬停在任何一个上都会导致文本可见,同时在所有情况下都保持圆圈可见?
根据 Robert Longson 的有用评论,这里有一个 JavaScript 解决方案:
<svg version="1.1" width="500" height="500" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="circle" cx="1000" cy="1000" r="50" />
<text id="text" x="900" y="900" style="font-size:100px" opacity="0">Test</text>
<script>
<![CDATA[
var circle = document.getElementById("circle");
var text = document.getElementById("text");
circle.addEventListener("mouseover",function(event){
text.setAttribute('opacity',1);
})
circle.addEventListener("mouseout",function(event){
text.setAttribute('opacity',0);
})
]]>
</script>
</svg>