jquerysvg-hover元素
我正在尝试使用jQuerySVG插件 一开始我就结巴了。我在这个圆圈上创建了一个简单的svg.circle和svg.text。我想给一个小动画，而鼠标悬停的圆圈。它可以工作，但当我在文本上移动鼠标指针时，悬停状态是关闭的。这是正确的行为，但如何在鼠标获取文本时强制此悬停状态 代码如下：jquerysvg-hover元素,jquery,svg,hover,Jquery,Svg,Hover,我正在尝试使用jQuerySVG插件 一开始我就结巴了。我在这个圆圈上创建了一个简单的svg.circle和svg.text。我想给一个小动画，而鼠标悬停的圆圈。它可以工作，但当我在文本上移动鼠标指针时，悬停状态是关闭的。这是正确的行为，但如何在鼠标获取文本时强制此悬停状态 代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <h
<!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>
jQuery SVG基础
#svgbasics{宽度：400px；高度：300px；边框：1px实心#484；字体系列：Tahoma；字体大小：50px；}
$（函数（）{
$（'svgbasics'）.svg（{onLoad:drawInitial}）；
});
函数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（函数（）{
$（this.css（“游标”、“指针”）；
$（mycircle）.animate（{svgR:45，svgStrokeWidth:4，svgStroke:'#f882a6'，100）；
}，函数（）{
$（mycircle）.animate（{svgR:50，svgStrokeWidth:0，svgStroke:'none'}，100）；
});
}
这是代码的结果：如果不希望文本响应鼠标悬停，请将文本上的指针事件属性设置为无，例如
<!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>
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'});
如果不希望文本响应鼠标悬停，请将文本上的“指针事件”属性设置为“无”
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 againbtw，它是一个css属性，它是如此有线，我从来没有听说过它，无论如何thanx再次