Question

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

我会粘贴一张图片，但没有足够的代表点。你可以在

看到图形

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

当你将鼠标悬停在文本上方时，我需要文本周围的白色变为灰色（#eeeeee）。我用一些简单的CSS得到了它。我甚至用jQuery和一些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>

任何帮助都会受到赞赏，我已经尝试过很多方法来使用HTML / CSS / jquery来完成它，但它也必须是一个链接，可扩展，比率锁定和响应。（呻吟!!!）

Answer 1

JSBin

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

文字不在圈内。创建一个svg组并使其生效 svg集团
2＆gt;还有一点是不要给你的身份证明，因为＃<circle id="#svg-text_1"应该是<circle id="svg-text_1"

.svg-button_1：悬停#svg-text_1 { 填充：灰色; }

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>

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

1 个答案: