鼠标悬停在SVG文本中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标悬停在SVG文本中相关的知识,希望对你有一定的参考价值。

我正在尝试制作一个在鼠标悬停时更改颜色的信息图,然后单击各个部分。我已设法进行鼠标悬停颜色更改并单击,但是块上有文本,当鼠标移过时,SVG认为我是Mousing一个不同的层。我尝试添加:将鼠标悬停在群组中,但没有任何乐趣。欢迎任何想法:

https://jsfiddle.net/dxv0paco/2/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you  test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>
答案

只需将文本指针 - 事件:无,如果您希望在鼠标悬停时将其忽略。

text {
 pointer-events: none;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you  test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>

以上是关于鼠标悬停在SVG文本中的主要内容,如果未能解决你的问题,请参考以下文章

仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画

当我在 SVG 中将鼠标悬停时,如何显示和隐藏同级元素?

jQuery SVG - 悬停元素

鼠标悬停时的SVG工具提示?

svg中线性渐变颜色的悬停事件

仅在悬停时显示 d3 节点文本