CODEWITHSUNDEEP
htmlsvg
Ricardo de Paula
Ricardo de Paula

Reputation: 632

How to add a link only in the SVG image?

Looks this image:

SGV square wrap

My link dont wraps the SVG shape. Instead it is inside a square that wrap the shape and I can't click on the image behind.

I need to add a link only in the shape, to outline it,making possible click in the others links.

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

Upvotes: 0

Views: 52

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

Because you've set pointer-events: bounding-box; If you don't want this, just remove it.

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

Upvotes: 1

Related Questions