javascript - SVG hover cancelled when mousing over an object on top -
i have svg had have text centred both horizontally , vertically.
i have pasted image don't have enough rep points. can see graphic @
https://www.dropbox.com/s/tt9ayqr0xugr4m9/link_example.png?dl=0
i need white around text go grey (#eeeeee) when hover on it. got simple css. got jquery , svg issue when hover on word about (which needs stay black time), grey goes white text on circle , cancels hover. have been trying hours , hours fix this.
my code is:
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <!-- gradient information --> <lineargradient id="svgid_1_" gradientunits="userspaceonuse" x1="50" y1="0" x2="50" y2="100"> <stop offset="0" style="stop-color:#ed7625"/> <stop offset="1" style="stop-color:#cf202f"/> </lineargradient> <a xlink:href="about.php"> <!-- gradient --> <circle class="gradient-outer" fill="url(#svgid_1_)" cx="50" cy="50" r="50"/> <g class="svg-button_1"> <!-- white overlay --> <circle id="#svg-text_1" class="white-inner" cx="50" cy="50" r="46" stroke="black" stroke-width="0" fill="white" /> <!-- text element --> <text x="50%" y="50%" dy=".3em" text-anchor="middle">about</text> </g> </a> any appreciated , have tried many numerous ways html/css/jquery have link, scalable, ratio locked , responsive. (groan!!!)
the jsbin has required code. issue facing because
- text not inside circle. create svg group , make effect on svg group
2>one more point dont give id # i.e
<circle id="#svg-text_1"should<circle id="svg-text_1".svg-button_1:hover #svg-text_1{ fill: grey; }
svg below
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <!-- gradient information --> <lineargradient id="svgid_1_" gradientunits="userspaceonuse" x1="50" y1="0" x2="50" y2="100"> <stop offset="0" style="stop-color:#ed7625"/> <stop offset="1" style="stop-color:#cf202f"/> </lineargradient> <a xlink:href="about.php"> <!-- gradient --> <circle class="gradient-outer" fill="url(#svgid_1_)" cx="50" cy="50" r="50"/> <g class="svg-button_1"> <!-- white overlay --> <circle id="svg-text_1" class="white-inner" cx="50" cy="50" r="46" stroke="black" stroke-width="0" fill="white" /> <!-- text element --> <text x="50%" y="50%" dy=".3em" text-anchor="middle">about</text> </g> </a>
Comments
Post a Comment