用于highcharts位置的自定义SVG符号

Question

我必须以类似的方式创建一个位置SVG图标。我不知道如何创建一个类似风格的图标。

位置图标:https://fonts.google.com/icons?selected=Material+Icons:add_location:

1. 图标创建:

   Highcharts.SVGRenderer.prototype.symbols。+ = function (x, y, w, h)｛返回("M",x, y + h/2,‘L’,x + w, y + h/2,"M",x + w/2, y,‘L’,x + w/2, y + h, ' z '];

   };
使用

2. 。iConobject = this.highChart.renderer.symbol('plus'， 0,0, iconSize, iconSize).attr ({填:"蓝",中风:"黑色","笔划宽度":1}(阀门().toFront ()

   hide ();

3. 传递X和Y位置动态

   this.iConobject.plusIcon.attr ({x: normalizedEvent。chartX - iconSize/2，y: myObj.highChart.plotTop - iconSize/2}(,告诉()

Answer 1

这里有一个纯SVG格式的。我不知道它对你的情况是否有用。

#map {
width: 400px;
height: 400px;
position: relative;
margin: 10px;
border: thin solid black;
}
.point {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAzMCI+CiAgPGRlZnM+CiAgICA8bWFzayBpZD0ibTEiPgogICAgICA8cGF0aCBkPSJNIDIwLDEwIEMgMjAsMTUgMTAsMzAgMTAsMzAgMTAsMzAgMCwxNSAwLDEwIDAsNSA1LDAgMTAsMCAxNSwwIDIwLDUgMjAsMTAgWiIgZmlsbD0id2hpdGUiIC8+CiAgICAgIDxsaW5lIHgxPSIxMCIgeTE9IjUiIHgyPSIxMCIgeTI9IjE1IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlPSJibGFjayIvPgogICAgICA8bGluZSB4MT0iNSIgeTE9IjEwIiB4Mj0iMTUiIHkyPSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZT0iYmxhY2siLz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjMwIiBmaWxsPSJncmF5IiBtYXNrPSJ1cmwoI20xKSIvPgo8L3N2Zz4=');
background-repeat: no-repeat;
position: absolute;
width: 20px;
height: 30px;
}

<p>The basic icon:</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 30" width="100" height="150">
<defs>
<mask id="m1">
<path d="M 20,10 C 20,15 10,30 10,30 10,30 0,15 0,10 0,5 5,0 10,0 15,0 20,5 20,10 Z" fill="white" />
<line x1="10" y1="5" x2="10" y2="15" stroke-width="2.5" stroke="black"/>
<line x1="5" y1="10" x2="15" y2="10" stroke-width="2.5" stroke="black"/>
</mask>
</defs>
<rect width="20" height="30" fill="gray" mask="url(#m1)"/>
</svg>
<p>A "map":</p>
<div id="map">
<span class="point" style="left:100px;top:50px"></span>
<span class="point" style="left:200px;top:100px"></span>
</div>