Attribute data-ls not allowed on element svg at this point. how to rectify it

While checking my site with w3cvalidator

it shows the this error Attribute data-ls not allowed on svg element at this point and End tag svg did not match the name of the current open element (use).

here is a sample code i used.

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

Thanks....

Solution

data- attributes are not strictly valid for svg you can get and set them using getAttribute and setAttribute but the html data attribute API is not available, hence the warning.

The usual XML way would be to declare a custom namespace and then have the attribute in that namespace e.g. have a xmlns:ls="<something appropriate for you>" and ls:<something>="offsetxin..." and then access the data using getAttributeNS

The <use> issue is that you don't close the <use> tag. You either need to write it as <use/> or <use></use>