Search code examples
svgsvg-animate

SVG: text over a shape disables animation on background shape

As I have demonstrated in this fiddle, I want SVG Cirlce to enlarge when hovered over it. But at the same time, I want to write some text over the circle (Eg. in the fiddle, "Hello" and "World").

I want that for user, text and circle should look as if they are the same entity. And all the time he/she has cursor over the circle, the circle should remain enlarged.

Please Run Quick Demo: 

div,
svg {
  background-color: grey;
  height: 100px;
  width: 600px;
}
<h1> test </h1>
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <circle id="C10" cx="50" cy="50" r="35" fill="red">Red</circle>
    <animate xlink:href="#C10" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
    <animate xlink:href="#C10" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />

    <circle id="C11" cx="150" cy="50" r="35" fill="green">Green</circle>
    <animate xlink:href="#C11" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
    <animate xlink:href="#C11" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
    <text x="150" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">Hello</text>


    <circle id="C12" cx="250" cy="50" r="35" fill="orange"></circle>
    <animate xlink:href="#C12" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
    <animate xlink:href="#C12" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
    <text id="T12" x="250" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">World</text>
    <set xlink:href="#C12" attributeName="r" to="42" begin="T12.mouseover" />

  </svg>
</div>

But issue I am facing is, as we hover the text, the 'circle.mouseout' animation is triggered, and the animation written for hover over the circle ends. And when we hover from text part to circle part (visually still within the circle), The animation for 'circle.mouseover' get restarted.

I have tried a solution in third (orange circle) - hover over text resizes the circle, but that is not giving desired result.

Please help. Solution using CSS / JS also will do. Please fork the fiddle with your solution so I can understand it better :) :)

Solution

  • Use pointer-events: none to make text elements "transparent" to your hovering.

    div,
svg {
  background-color: grey;
  height: 100px;
  width: 600px;
}
text {
  pointer-events: none;
}
    <h1> test </h1>
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <circle id="C10" cx="50" cy="50" r="35" fill="red">Red</circle>
    <animate xlink:href="#C10" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
    <animate xlink:href="#C10" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />

    <circle id="C11" cx="150" cy="50" r="35" fill="green">Green</circle>
    <animate xlink:href="#C11" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
    <animate xlink:href="#C11" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
    <text x="150" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">Hello</text>


    <circle id="C12" cx="250" cy="50" r="35" fill="orange"></circle>
    <animate xlink:href="#C12" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
    <animate xlink:href="#C12" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
    <text id="T12" x="250" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">World</text>
    <set xlink:href="#C12" attributeName="r" to="42" begin="T12.mouseover" />

  </svg>
</div>