Я вставил пользовательский SVG на страницу WordPress и добавил несколько якорных тегов, чтобы связать пути SVG с другими страницами. Он хорошо выглядит, где бы я ни просматривал его, но когда я его публикую, он добавляет закрывающий тег </svg>
сразу после первого тега </a>
, поэтому он показывает только один из связанных путей.
Вот код, который я вставляю в пользовательский блок HTML на странице WordPress:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="church-map" width="1089" height="1025" viewBox="0 0 1089 1325" fill="none" preserveAspectRatio="xMidYMid meet">
<path d="M34.5 1H33.5V2V630H2.5H1.5V631V1236V1237H2.5H238H239V1236V632H336.5H337.5V631V2V1H336.5H34.5Z" fill="white" stroke="black" stroke-width="2"/>
<path d="M862.498 159.501L862.144 158.566L861.209 158.92L675.331 229.357L674.396 229.711L674.75 230.647L764.107 466.453L700.646 490.502L699.711 490.856L700.065 491.791L773.201 684.792L764.47 744.093L725.309 733.507L724.344 733.246L724.083 734.212L653.386 995.734L653.125 996.7L654.091 996.961L716.434 1013.81L644.82 1269.9L644.551 1270.86L645.514 1271.13L833.99 1323.84L834.953 1324.11L835.222 1323.14L979.014 808.962L1091.4 766.375L1092.33 766.02L1091.98 765.085L862.498 159.501Z" fill="white" stroke="black" stroke-width="2"/>
<a xlink:href="rooms/1880-2/">
<path d="M35 630V2H337V630H35Z" class="selectable-unit" fill="#95FF8C" stroke="black" stroke-width="2"/>
</a>
<a xlink:href="#">
<path d="M147 744V969H238V744H147Z" class="selectable-unit" fill="#95FF8C" stroke="black" stroke-width="2"/>
</a>
<a xlink:href="#">
<path d="M721 350L801.631 320.912L822.772 379.514L742.886 408.115L721 350Z" class="selectable-unit" fill="#95FF8C" stroke="black" stroke-width="2"/>
</a>
<a xlink:href="#">
<path d="M1090.75 764.939L977.891 807.706L765 744.852L773.933 684.18L766.664 665L1016.5 569L1090.75 764.939Z" class="selectable-unit" fill="#95FF8C" stroke="black" stroke-width="2"/>
</a>
<a xlink:href="#">
<path d="M677 910L654 995.264L823 1042.32L847 957.5L677 910Z" class="selectable-unit" fill="#95FF8C" stroke="black" stroke-width="2"/>
</a>
<a xlink:href="#">
<path d="M717.971 1013L700 1077.26L888.535 1129.76L906.526 1065.43L717.971 1013Z" class="selectable-unit" fill="#95FF8C" stroke="black" stroke-width="2"/>
</a>
</svg>
Вот изображение тега </svg>
, которое вставляется преждевременно: