当鼠标悬停在顶部的对象上时，SVG悬停被取消

I have an SVG that had to have text centred both horizontally and vertically.

我有一个SVG,必须让文本水平和垂直居中。

I would have pasted an image but don't have enough rep points. You can see the graphic at

我会粘贴图像,但没有足够的重复点。你可以看到图形

https://www.dropbox.com/s/tt9ayqr0xugr4m9/link_example.png?dl=0

I need the white around the text to go grey (#eeeeee) when you hover over it. I got that with some simple CSS. I even got it with jQuery and some SVG but the issue is that when you hover over the word about (which needs to stay black all the time), the grey goes back to white as the text is over the circle and cancels the hover. I have been trying for hours and hours to fix this.

当你将鼠标悬停在文本上方时,我需要文本周围的白色变为灰色(#eeeeee)。我用一些简单的CSS得到了它。我甚至用jQuery和一些SVG得到它但问题是当你将鼠标悬停在关于这个词时(需要始终保持黑色)时,灰色会回到白色,因为文本在圆圈上方并取消悬停。我一直在努力解决这个问题。

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 help would be appreciated and I have tried many numerous ways with HTML/CSS/jquery to do it but it also have to be a link, scalable, ratio locked and responsive. (GROAN!!!)

任何帮助将不胜感激,我已经尝试了许多方法与HTML / CSS / jquery做,但它也必须是一个链接,可扩展,比率锁定和响应。 (呻吟!!!)

1 个解决方案

#1

JSBin

The jsbin has your required code. The issue you are facing is because

jsbin有你需要的代码。你面临的问题是因为

Text is not inside circle. Create a svg group and make that effect on the svg group

文字不在圈内。创建一个svg组并在svg组上生成该效果

2>One more point is dont give your id as # i.e <circle id="#svg-text_1" should be <circle id="svg-text_1"
2>还有一点是不要将你的身份证明为#ie

.svg-button_1:hover #svg-text_1{ fill: grey; }
.svg-button_1:悬停#svg-text_1 {填充:灰色; }

SVG is as below

SVG如下

<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>

1 个解决方案

#1

更多相关文章

随机推荐