我正在尝试将svg示例悬停在某些元素上以扩展/缩放它们。我不知道我哪里出错或错过了什么。请帮忙。
这是小提琴链接 - http://jsfiddle.net/hNrwE/（我不知道如何在小提琴上传svg，所以我也在这里提供svg代码）
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#stage").load('flowchart3.svg',function(response){
$(this).addClass("svgLoaded");
if(!response){
// Error loading SVG!
// Make absolutely sure you are running this on a web server or localhost!
}
});
});
</script>
<style>
#stage {
width: 1024px;
height: 1386px;
}
#yellow,#yellowcircletext,#yellowcircle,#yellowdetails{
/*transform-origin*/
-webkit-transform-origin:506.5px 114.5px;
-moz-transform-origin:506.5px 114.5px;
-ms-transform-origin:506.5px 114.5px;
-o-transform-origin:506.5px 114.5px;
transform-origin:506.5px 114.5px;
}
#blue,#bluecircletext,#bluecircle,#bluedetails{
/*transform-origin*/
-webkit-transform-origin:458.75px 202.75px;
-moz-transform-origin:458.75px 202.75px;
-ms-transform-origin:458.75px 202.75px;
-o-transform-origin:458.75px 202.75px;
transform-origin:458.75px 202.75px;
}
#green,#greencircletext,#greencircle,#greendetails{
/*transform-origin*/
-webkit-transform-origin:593.734px 193.26px;
-moz-transform-origin:593.734px 193.26px;
-ms-transform-origin:593.734px 193.26px;
-o-transform-origin:593.734px 193.26px;
transform-origin:593.734px 193.26px;
}
#pink,#pinkcircletext,#pinkcircle,#pinkdetails{
/*transform-origin*/
-webkit-transform-origin:360.875px 313.469px;
-moz-transform-origin:360.875px 313.469px;
-ms-transform-origin:360.875px 313.469px;
-o-transform-origin:360.875px 313.469px;
transform-origin:360.875px 313.469px;
}
#orange,#orangecircletext,#orangecircle,#orangedetails{
/*transform-origin*/
-webkit-transform-origin:487px 329px;
-moz-transform-origin:487px 329px;
-ms-transform-origin:487px 329px;
-o-transform-origin:487px 329px;
transform-origin:487px 329px;
}
#yellow2,#yellow2circletext,#yellow2circle,#yellow2details{
/*transform-origin*/
-webkit-transform-origin:412px 424.75px;
-moz-transform-origin:412px 424.75px;
-ms-transform-origin:412px 424.75px;
-o-transform-origin:412px 424.75px;
transform-origin:412px 424.75px;
}
[id$=details]{
/*transform*/
-webkit-transform:scale(0, 0);
-moz-transform:scale(0, 0);
-ms-transform:scale(0, 0);
-o-transform:scale(0, 0);
transform:scale(0, 0);
}
#yellow2badge:hover [id$=details]{
/*transform*/
-webkit-transform:scale(2, 2);
-moz-transform:scale(2, 2);
-ms-transform:scale(2, 2);
-o-transform:scale(2, 2);
transform:scale(2, 2);
}
#yellow2badge:hover [id$=circletext]{
/*transform*/
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
[id$=badge], [id$=circletext], [id$=details]{
/*transition*/
-webkit-transition:transform 0.25s ease-in-out;
-moz-transition:transform 0.25s ease-in-out;
-o-transition:transform 0.25s ease-in-out;
transition:transform 0.25s ease-in-out;
}
</style>
<div class="cbody-full">
<div class="container">
<div id="benefits">
<div class="info">
<div id="stage"> <!-- Fallback Text Content can go here --> </div>
</div>
</div>
</div>
</div>
xml / svg代码 -
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="timeline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g id="yellow2badge">
<circle id="yellow2circle" fill="#FFEB01" cx="412" cy="424.75" r="89"/>
<text id="yellow2circletext" transform="matrix(1 0 0 1 352.875 424.75)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="28.8769">Preventive </tspan><tspan x="0" y="34.652" font-family="'MyriadPro-Regular'" font-size="28.8769">Care Plan</tspan></text>
<g id="yellowdetails_1_" display="none">
<text transform="matrix(1 0 0 1 286 382)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Care plan will have home</tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">visits, tests by lab partners</tspan><tspan x="0" y="60" font-family="'MyriadPro-Regular'" font-size="25">A periodic check-up regime </tspan><tspan x="0" y="90" font-family="'MyriadPro-Regular'" font-size="25">can be designed as per users</tspan><tspan x="0" y="120" font-family="'MyriadPro-Regular'" font-size="25">requirement</tspan></text>
</g>
</g>
<g id="orangebadge">
<circle id="orangecircle" fill="#FF8A00" cx="487" cy="329" r="75"/>
<text transform="matrix(1 0 0 1 341 293)" display="none"><tspan x="0" y="0" display="inline" font-family="'MyriadPro-Regular'" font-size="25">Based on Tests conducted or </tspan><tspan x="0" y="30" display="inline" font-family="'MyriadPro-Regular'" font-size="25">consultants report we provide</tspan><tspan x="0" y="60" display="inline" font-family="'MyriadPro-Regular'" font-size="25">a preventive health care plan </tspan><tspan x="0" y="90" display="inline" font-family="'MyriadPro-Regular'" font-size="25">for a year.</tspan></text>
<g id="orangedetails">
<text id="orangecircletext" transform="matrix(1 0 0 1 437 324)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Test Result</tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25"> Analysis</tspan></text>
</g>
</g>
<g id="pinkbadge">
<ellipse id="pinkcircle" fill="#F131C3" cx="360.875" cy="313.469" rx="74.875" ry="76.281"/>
<text id="pinkcircletext" transform="matrix(1 0 0 1 333.875 313.4688)" font-family="'MyriadPro-Regular'" font-size="25">Tests</text>
<g id="pinkdetails" display="none">
<text transform="matrix(1 0 0 1 209 258)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Consultant doctor is</tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">recommended to reguster</tspan><tspan x="0" y="60" font-family="'MyriadPro-Regular'" font-size="25">medical history of parents and </tspan><tspan x="0" y="90" font-family="'MyriadPro-Regular'" font-size="25">gives feedback if full body </tspan><tspan x="0" y="120" font-family="'MyriadPro-Regular'" font-size="25">checks required</tspan></text>
</g>
</g>
<g id="greenbadge">
<circle id="greencircle" fill="#B3E500" cx="610.102" cy="191.633" r="75.633"/>
<text id="greencircletext" transform="matrix(1 0 0 1 549.3242 191.6338)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="27.6982">Emergency</tspan><tspan x="0" y="33.238" font-family="'MyriadPro-Regular'" font-size="27.6982">contacts</tspan></text>
<g id="greendetails" display="none">
<text transform="matrix(1 0 0 1 487 177)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Emergency service number </tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">is given by us for nearby </tspan><tspan x="0" y="60" font-family="'MyriadPro-Regular'" font-size="25">healthcare facilities</tspan></text>
</g>
</g>
<g id="bluebadge">
<circle id="bluecircle" fill="#00B2FC" cx="458.75" cy="202.75" r="83.75"/>
<text id="bluecircletext" transform="matrix(1 0 0 1 398 221)" font-family="'MyriadPro-Regular'" font-size="28.72">Fill Details</text>
<g id="bluedetails" display="none">
<text transform="matrix(1 0 0 1 318 208.188)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Provide us with details about </tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">you and your parents.</tspan></text>
</g>
</g>
<g id="yellowbadge">
<circle id="yellowcircle" fill="#FFEB01" cx="506.5" cy="114.5" r="69.5"/>
<g id="yellowdetails" display="none">
<text transform="matrix(1 0 0 1 442 106)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Sign up for </tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">our services!</tspan></text>
</g>
<text id="yellowcircletext" transform="matrix(1 0 0 1 458.75 119)" font-family="'MyriadPro-Regular'" font-size="28.7167">Sign up.</text>
</g>
</svg>
答案 0 :(得分：1)
我认为你主要只是在选择器中得到了错误的ID，然后转换略有错误，但我可能会误解你正在尝试做的事情......
所以，例如，仅查看底部的黄色圆圈，我已改为......
#yellow2badge:hover [id$="yellow2circle"] {
/*transform*/
-webkit-transform:scale(2, 2);
-moz-transform:scale(2, 2);
-ms-transform:scale(2, 2);
-o-transform:scale(2, 2);
transform:scale(2, 2);
}
#yellow2badge:hover [id$="circletext"]{
/*transform*/
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
[id$=badge], [id$=circletext], [id$=details],[id$=circle] {
/*transition*/
-webkit-transition:-webkit-transform 0.25s ease-in-out;
-moz-transition:-moz-transform 0.25s ease-in-out;
-o-transition:-o-transform 0.25s ease-in-out;
transition:transform 0.25s ease-in-out;
}
注意，我添加了[id $ = circle]，并修改了-webkit-transition到-webkit-transition：-webkit-transform。我在http://svg.dabbles.info/so21364791.html悬停在底部圆圈上的测试示例
我还没有做过很多（不确定你想要的文字），你可能会发现它也需要调整其他浏览器，但我希望它能帮助你。