如何制作.svg透明区域不可点击

Question

我正在尝试将.svg图像设置为按钮。唯一的问题是，我不仅可以点击彩绘，还可以点击透明度。这个我需要禁用所以我只能点击绘制的。

下面我提供了迄今为止我得到的html代码（基本上是我从实际文件中复制的内容。为了澄清，我在Windows机器上从Adobe Illustrator导出了这个图像。

我还没有通过.css进行任何修改。

<div id="brand"><a href="index.html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106"><defs><style>.cls-1{fill:#ff7800;}</style></defs><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></svg></a></div>

Answer 1

您可以将<a href="index.html">移动到SVG代码中，以便只链接<path>元素而不是整个图像：

<div id="brand">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
        <defs><style>.cls-1{fill:#ff7800;}</style></defs>
        <a href="index.html">
            <path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
            <path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
        </a>
    </svg>
</div>

在SVG图像中使用<a href>的能力是一个相对较新的介绍。如果您需要支持旧版浏览器，则可能需要包含xlink命名空间：

<div id="brand">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106">
        <defs><style>.cls-1{fill:#ff7800;}</style></defs>
        <a xlink:href="index.html">
            <path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
            <path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
        </a>
    </svg>
</div>

编辑我刚试过这个，似乎iOS和OS X上最新版本的Safari不支持基本的href版本，它们只支持xlink:href变体。只需在iOS上使用href Safari就可以使整个图像可以点击（这是你要避免的），在OS X上，图像根本无法点击。

Answer 2

由于您的图像是圆形，因此您可以在此特定方案中将border-radius: 50%和overflow: hidden应用于a元素。

a {
    border-radius: 50%;
    display: block;
    overflow: hidden;
}

a svg {
    display: block;
}

<a href="index.html">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
        <defs>
            <style>.cls-1 {fill: #FF7800;}</style>
        </defs>
            
        <path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
        <path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
    </svg>
</a>