Данные атрибута не разрешены на элементе svg в этой точке. как исправить это

Question

Во время проверки моего сайта с w3cvalidator

это показывает эта ошибка атрибутов данных-LS не допускается на SVG элемент в этой точке и Конечный тег SVG не совпадает с именем текущего открытого элемента (использование).

вот пример кода, который я использовал.

<svg class="ls-l" style="top:320px;left:30%;white-space: nowrap;" 
    data-ls="offsetxin:-15; offsetyin:10; delayin:6854; offsetxout:-15; offsetyout:10; durationout:500; showuntil:1000; easingout:easeInOutQuart; scalexin:0; scaleyin:0; scalexout:0; scaleyout:0;" 
    width="50" height="50" viewBox="0 0 64 64" > 
    <use xlink:href="#location-pin"> 
</svg> 

Спасибо ....

Answer 1

data- атрибуты не являются строго справедливо для SVG вы можете получить и установить их с помощью GetAttribute и SetAttribute но HTML data attribute API не доступен, поэтому предупреждение.

Обычным способом XML будет объявление пользовательского пространства имен, а затем атрибут в этом пространстве имен, например. имеют xmlns:ls="<something appropriate for you>" и ls:<something>="offsetxin...", а затем получить доступ к данным с помощью getAttributeNS

<use> проблема в том, что вы не закрыть <use> тег. Вам необходимо либо написать его как <use/>, либо <use></use>

Answer 2

Проверить сейчас. Вы используете : вместо = для присвоения значений для атрибутов элемента SVG

<svg class="ls-l" style="top:320px;left:30%;white-space: nowrap;" 
    data-ls="offsetxin:-15" offsetyin=10 delayin=6854 offsetxout="-15" offsetyout="10" durationout="500" showuntil="1000" easingout="easeInOutQuart" scalexin=0 scaleyin=0 scalexou=0 scaleyout=0 
    width="50" height="50" viewBox="0 0 64 64" > 
    <use xlink:href="#location-pin"> 
</svg>