Question

我有一个非常复杂的svg，我试图用jQuery很好地玩。基本上我试图在各种花瓣上引入悬停和点击状态，结果将根据我与之交互的结果而有所不同。我的svg看起来像;

<svg version="1.1" id="run-compare-graph"  style="margin-top:-30px;height:400px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 356.2 356.5" enable-background="new 0 0 356.2 356.5" xml:space="preserve">

                    <g id="mask_1" class="card-toggle">
                        <path fill="#BDBDBD" d="M52.2,52.3"/>
                        <path fill="#BDBDBD" d="M0,178.3"/>
                        <path fill="#BDBDBD" d="M52.2,304.3"/>
                        <path fill="#BDBDBD" d="M178.2,356.5"/>
                        <path fill="#BDBDBD" d="M304.1,304.3"/>
                        <path fill="#BDBDBD" d="M356.3,178.3"/>
                        <g>
                            <defs>
                                <polyline id="SVGID_1_" points="304.1,52.3 178.2,0.1 178,178.3          "/>
                            </defs>
                            <clipPath id="SVGID_2_">
                                <use xlink:href="#SVGID_1_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_2_)" fill="#57D6AC" cx="178" cy="178.3" r="149"/>
                        </g>
                    </g>
                    <g id="mask_2" class="card-toggle">
                        <path fill="#BDBDBD" d="M52.2,52.3"/>
                        <path fill="#BDBDBD" d="M0,178.3"/>
                        <path fill="#BDBDBD" d="M52.2,304.3"/>
                        <path fill="#BDBDBD" d="M178.2,356.5"/>
                        <path fill="#BDBDBD" d="M304.1,304.3"/>
                        <path fill="#BDBDBD" d="M356.3,178.3"/>
                        <g>
                            <defs>
                                <polyline id="SVGID_3_" points="356.3,178.4 304.1,52.4 178,178.3            "/>
                            </defs>
                            <clipPath id="SVGID_4_">
                                <use xlink:href="#SVGID_3_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_4_)" fill="#F1F954" cx="177.7" cy="178.8" r="101"/>
                        </g>
                    </g>
                    <g id="mask_3" class="card-toggle">
                        <g>
                            <defs>
                                <polyline id="SVGID_5_" points="304,304.4 356.2,178.5 178,178.3             "/>
                            </defs>
                            <clipPath id="SVGID_6_">
                                <use xlink:href="#SVGID_5_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_6_)" fill="#6B6565" cx="177.7" cy="178.5" r="112"/>
                        </g>
                    </g>
                    <g id="mask_4" class="card-toggle">
                        <g>
                            <defs>
                                <polyline id="SVGID_7_" points="177.9,356.6 303.9,304.4 178,178.3           "/>
                            </defs>
                            <clipPath id="SVGID_8_">
                                <use xlink:href="#SVGID_7_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_8_)" fill="#0F5947" cx="178.3" cy="178.3" r="109"/>
                        </g>
                    </g>
                    <g id="mask_5" class="card-toggle">
                        <g>
                            <defs>
                                <polyline id="SVGID_9_" points="51.9,304.3 177.8,356.5 178,178.3            "/>
                            </defs>
                            <clipPath id="SVGID_10_">
                                <use xlink:href="#SVGID_9_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_10_)" fill="#57D6AC" cx="178" cy="178.3" r="101"/>
                        </g>
                    </g>
                    <g id="mask_6" class="card-toggle">
                        <g>
                            <defs>
                                <polyline id="SVGID_11_" points="-0.3,178.2 51.9,304.1 178,178.3            "/>
                            </defs>
                            <clipPath id="SVGID_12_">
                                <use xlink:href="#SVGID_11_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_12_)" fill="#0F5947" cx="178" cy="178.3" r="111"/>
                        </g>
                    </g>
                    <g id="mask_7" class="card-toggle">
                        <g>
                            <defs>
                                <polyline id="SVGID_13_" points="52,52.1 -0.2,178.1 178,178.3           "/>
                            </defs>
                            <clipPath id="SVGID_14_">
                                <use xlink:href="#SVGID_13_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_14_)" fill="#57D6AC" cx="178" cy="178.3" r="93"/>
                        </g>
                    </g>
                    <g id="mask_8" class="card-toggle">
                        <g>
                            <defs>
                                <polyline id="SVGID_15_" points="178.1,0 52.1,52.2 178,178.3            "/>
                            </defs>
                            <clipPath id="SVGID_16_">
                                <use xlink:href="#SVGID_15_"  overflow="visible"/>
                            </clipPath>
                            <circle clip-path="url(#SVGID_16_)" fill="#F1F954" cx="177.9" cy="178.2" r="101"/>
                        </g>
                    </g>
                    <g id="Layer_5">
                        <circle fill="#414045" cx="178.2" cy="178.4" r="63"/>
                        <circle opacity="0.3" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="178.2" cy="178.3" r="100.7"/>
                        <circle opacity="0.3" fill="#414045" stroke="#FFFFFF" stroke-miterlimit="10" cx="178.2" cy="178.3" r="81.3"/>
                    </g>
                    <g id="RUN_SCORE">
                        <text transform="matrix(1.0008 0 0 1 145.7867 148.506)" fill="#BDBDBD" font-size="12.147">RUN SCORE</text>
                    </g>
                    <g id="_x36_7">

                            <text id="run-compare-value"  transform="matrix(1.0008 0 0 1 136.7773 210.2179)" fill="#57D6AC" font-size="67.0697" letter-spacing="-1"><span class="runcompare odometer lime-text">98</span></text>
                    </g>
                    </svg>

输出如下所示：

enter image description here

我现在正尝试在各种花瓣上实现一些jQuery动作，例如点击和悬停状态。我能做的最好的事情就是使用

来定位圈子

$('svg .card-toggle').mouseover(function(){
  $('.data-card').eq($(this).index()).addClass("big");
});

这很好用......但它会在颜色变化的边缘附近分解，并靠近圆心。

问题： 我是否需要重新编写如何使用jQuery？或者我是＆＃39; SOL＆＃39;正如他们所说，因为这是我要获得的最佳标记，考虑到我试图重现的形状？

谢谢，亚历

复杂的jQuery和SVG交互

0 个答案: