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

回答1:

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>

回答2:

Check now. You are using : instead of = to assign values for attributes of svg element

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

来源：https://stackoverflow.com/questions/26034699/attribute-data-ls-not-allowed-on-element-svg-at-this-point-how-to-rectify-it

标签

html5

svg

w3c

w3c-validation

svg-animate