D
D
Dmitry Markov2021-02-19 10:30:08
PHP
Dmitry Markov, 2021-02-19 10:30:08

How to add date attribute to g in svg?

Implemented the addition of logos to svg from the admin panel, it remains only to add a link to the page for each .tk-shops__item
How can I add a date attribute to the group, which I will create in defs ?

<svg id="svg-map" viewBox="0 0 1309 706" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="tk-shops">
        <g class="tk-shops__item A3">
            <path class="tk-shops__area" d="M962 117H1077V477H962V117Z" fill="#AFD2F9" />
            <rect class="tk-shops__logo" x="973" y="237" width="92" height="91" fill="url(#patternA3)" />
        </g>
        <g class="tk-shops__item A2">
            <path class="tk-shops__area" d="M1079 360H1128V701H962V479H1079V360Z" fill="#AFD2F9" />
            <rect class="tk-shops__logo" x="982" y="533" width="127" height="91" fill="url(#patternA2)" />
        </g>
        <g class="tk-shops__item A1" >
            <path class="tk-shops__area" d="M1184 365H1247L1305 423V701H1130V475H1184V365Z" fill="#AFD2F9" />
            <rect class="tk-shops__logo" x="1157" y="530" width="125" height="98" fill="url(#patternA1)" />
        </g>
    </g>





    <defs>
        <?php
            foreach($posts as $post) {
                $shop_id = get_field('id-shop', $post->ID);
                $width = get_field('logo-width', $post->ID);
                $height = get_field('logo-height', $post->ID);
                $transform = get_field('logo-transform', $post->ID);
                echo '
                    <pattern id="pattern'.$shop_id.'" patternContentUnits="objectBoundingBox" width="1" height="1">
                        <use xlink:href="#image'.$shop_id.'" />
                    </pattern>
                    <image id="image'.$shop_id.'" data-name="Rectangle 1817.png" width="'.$width.'" height="'.$height.'" transform="'.$transform.'" xlink:href="'. get_field('logo-shop', $post->ID)['url'] .'" />
                ';
            }
        ?>
    </defs>
</svg>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question