如何只在SVG图片中添加链接？

Question

如下图所示：

SGV square wrap

我的链接没有包装SVG形状。相反，它是在包装形状的正方形内，我无法单击后面的图像。

我只需要在形状中添加一个链接，勾勒出它的轮廓，使点击其他链接成为可能。

​

<style>
    body {
        background-color: #adaeb9;
    }

    .pepitas-home {
        display: grid;
        grid-template-columns: 1fr 4fr 4fr 1fr;
    }

       .comunicacao {
        grid-column: 2/3;
        grid-column: 3/4;
        width: 90%;
       pointer-events: bounding-box;
    }

    
</style>

        <div class="pepitas-home">

        <div class="comunicacao">

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 695.01 631.32">
                <defs>
                    <style>
                        .cls-5,
                        .cls-6 {
                            fill: #368e4b;
                            stroke: black;
                            pointer-events: bounding-box;
                        }

                        .cls-5 {
                            font-size: 28.13px;
                            font-family: Roboto-Medium, Roboto;
                            font-weight: 500;
                        }
                    </style>
                </defs>
                <title>Ativo 7</title>
                <g id="Camada_2" data-name="Camada 2">
                    <g id="Camada_1-2" data-name="Camada 1"> <a href="#">
                            <polygon class="cls-6"
                                points="321.03 0 368.08 56.57 359.75 131.17 615.51 316.56 695.01 574.27 639.18 602.66 342.68 541.83 0 390.04 3.76 125.59 231.62 85.57 321.03 0" />
                        </a> <text class="cls-5" transform="translate(400.66 587.65) rotate(11.83)">
                            <tspan xml:space="preserve"> comunicação</tspan>
                        </text></g>
                </g>
            </svg>
        </div>
    </div>

​

Answer 1

因为你已经设置了指针事件:边界框；如果你不想要它，就把它删除掉。

​

<style>
    body {
        background-color: #adaeb9;
    }

    .pepitas-home {
        display: grid;
        grid-template-columns: 1fr 4fr 4fr 1fr;
    }

       .comunicacao {
        grid-column: 2/3;
        grid-column: 3/4;
        width: 90%;
    }

    
</style>

        <div class="pepitas-home">

        <div class="comunicacao">

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 695.01 631.32">
                <defs>
                    <style>
                        .cls-5,
                        .cls-6 {
                            fill: #368e4b;
                            stroke: black;
                        }

                        .cls-5 {
                            font-size: 28.13px;
                            font-family: Roboto-Medium, Roboto;
                            font-weight: 500;
                        }
                    </style>
                </defs>
                <title>Ativo 7</title>
                <g id="Camada_2" data-name="Camada 2">
                    <g id="Camada_1-2" data-name="Camada 1"> <a href="#">
                            <polygon class="cls-6"
                                points="321.03 0 368.08 56.57 359.75 131.17 615.51 316.56 695.01 574.27 639.18 602.66 342.68 541.83 0 390.04 3.76 125.59 231.62 85.57 321.03 0" />
                        </a> <text class="cls-5" transform="translate(400.66 587.65) rotate(11.83)">
                            <tspan xml:space="preserve"> comunicação</tspan>
                        </text></g>
                </g>
            </svg>
        </div>
    </div>

​