SVG image xlink:href setting failed_html/css_WEB-ITnose

The company’s frequent business needs require marking regional information on the map. Considering compatibility issues, in actual development, map information is drawn through raphael.js and related interactions are carried out

Colleagues in the product department worked hard to draw SVG maps. The relationship between the map tiles and the actual area code can be configured, which is more troublesome. Just use the tool to configure the relevant information, written through AAUTO and IE kernel

I have actually used node-webkit recently. There is a new project map configuration that needs to be upgraded. I looked at some avalon.js and prepared to upgrade the configuration tool. I will share this after it is completed. By the way, I will share the pitfalls I have filled recently

After talking about the background for a long time, let’s get to the point

SVG image xlink:href setting failed

Actually when using avalon, pictures need to be introduced into the SVG node for display of points, through level Attributes, dynamically modify graphics

　

<image ms-if-loop="el.shap == 'centre'" ms-attr-x="el.x" ms-attr-y="el.y" width="10" height="10" ms-attr-xlink:href="{{el.level}}.png"  style="cursor: pointer;" />

Nothing was reflected after modifying the level value. I checked the information for a long time but failed. Finally, I tried it and found that it was xlink: href needs to have a relevant default value at the beginning. This attribute is actually not available when the template generates nodes, so the xlink:href attribute

<image ms-if-loop="el.shap == 'centre'" ms-attr-x="el.x" ms-attr-y="el.y" width="10" height="10" ms-attr-xlink:href="{{el.level}}.png" xlink:href="" style="cursor: pointer;" />