jQuery SVG - 悬停元素
Posted
技术标签:
【中文标题】jQuery SVG - 悬停元素【英文标题】：jQuery SVG - hover element 【发布时间】：2012-10-03 06:22:54 【问题描述】：我正在尝试使用 jQuery SVG 插件http://keith-wood.name/svg.html
一开始我就卡住了。我在那个圆圈上创建了一个简单的 svg.circle 和 svg.text 。当鼠标悬停在圆圈上时，我想给出一点动画。它可以工作，但是当我在文本悬停状态上移动鼠标指针时关闭。这是正确的行为，但是如何在鼠标获取文本时强制这种悬停状态？
这是代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
#svgbasics width: 400px; height: 300px; border: 1px solid #484; font-family: Tahoma; font-size: 50px;
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.svganim.min.js"></script>
<script type="text/javascript" src="jquery.svgfilter.js"></script>
<script type="text/javascript">
$(function()
$('#svgbasics').svg(onLoad: drawInitial);
);
function drawInitial(svg)
var mycircle = svg.circle(75, 75, 50, fill: '#f2477b', stroke: 'none', 'stroke-width': 0);
var mytext = svg.text(52, 76, 'SVG', 'font-family':"Verdana", 'font-size':20, 'text-anchor':'middle', 'fill':'#fff', 'cursor': 'pointer');
$(mycircle).hover(function()
$(this).css("cursor", "pointer");
$(mycircle).animate(svgR: 45, svgStrokeWidth: 4, svgStroke: '#f882a6', 100);
, function()
$(mycircle).animate(svgR: 50, svgStrokeWidth: 0, svgStroke: 'none', 100);
);
</script>
</head>
<body>
<div id="svgbasics"></div>
</body>
</html>
这是代码的结果：http://goo.gl/RwRw0
【问题讨论】：
【参考方案1】：如果您不希望文本响应鼠标悬停，例如将指针事件属性设置为无，例如
var mytext = svg.text(52, 76, 'SVG', 'font-family':"Verdana", 'font-size':20, 'text-anchor':'middle', 'fill':'#fff', 'cursor': 'pointer');
变成
var mytext = svg.text(52, 76, 'SVG', 'font-family':"Verdana", 'font-size':20, 'text-anchor':'middle', 'fill':'#fff', 'cursor': 'pointer', 'pointer-events', 'none');
【讨论】：
顺便说一句，它是一个 css 属性，它是如此的连线我从来没有听说过它，反正thanx再次以上是关于jQuery SVG - 悬停元素的主要内容，如果未能解决你的问题，请参考以下文章
CSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间
SVG 元素的 jQuery .hasClass() 方法失败