SVG图标打点实现

最近接到一个任务，需要在底图上标注点。实现方式用d3结合svg方式

第一种实现方式，在svg上动态创建一个图片，实现方式如下：

that.dataParent.bgObject = that.dataParent.container

.append("g")

.attr("class", "dot12")

.append("image")

.attr("xlink:href", that.dataParent.backgroudImage)

.attr("x", "0")

.attr("y", "0")

.attr("width", that.dataParent.containerWidth)

.attr("height", that.dataParent.containerHight);

控制图片的高度从此实现图标大小的缩放，实现的很顺利，很快完成的了任务。

过了一段时间发现，这种实现很难满足现实需求，如果每个点又5个状态，系统中要保持5张不同颜色的图片。如果有100中不同类型的点，那要保存500中图片。图片设计人员表示需要很多工作量。

讨论过后，决定用字体图标显示，把图片做成字体图标。讨论的时候感觉这种方式实现也不复杂。就答应了。

谁知这就是我的噩梦，花了两天实现才完全实现上述功能。记录如下：

我google上搜索，如果想在svg上使用icons，大概有两种方式

第一种用text标签，在网上搜索如下

You need to use the proper Unicode inside a normal text element, and then set the font-family to "FontAwesome" like this:

node.append('text')

.attr('font-family', 'FontAwesome')

.attr('font-size', function(d) { return d.size+'em'} )

.text(function(d) { return '\uf118' });

This exact code will render an "icon-smile" icon. The unicodes for all FontAwesome icons can be found here:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

Be aware that you need to adapt the codes in the cheatsheet from HTML/CSS unicode format to Javascript unicode format so that  must be written \uf118 in your javascript.

 

个人感觉比较复杂，因为我应用中需要图标的叠加，所有我没有采用此方法。

第二种方法

g.append('svg:foreignObject')

.attr("width", 100)

.attr("height", 100)

.append("xhtml:body")

.html('<i class="icon-fixed-width icon-user"></i>');

发现这种方式操作解决，就开始用这种方式实现。

一切都很顺利，但字体的大小不能小于12px，如果小于12px，设置的字体无效。在我的应用中必须动态设置图标的大小。

 尝试了好多方法，浪费了一天的时间，原来的schrome做了限制。

好那就改变限制，先是用-webkit-text-size-adjust: none;发现怎么设置都无效，

于是又问google ，发现这种方式已经废弃。

最终找到一种方法，用js控制  translate 和scale

.append("svg:foreignObject")

.attr("transform", function(d) {

return (

"translate(" +

(d.x ) +

"," +

(d.y ) +

") scale("+that.dataParent.slider+") translate(" +

( - d.x) +

"," +

(- d.y) +

")"

);

})

.attr("style", "font-size:1px;")

.attr("width", RECT_W)

.attr("height", RECT_H)

 

// .append("image")

// .attr("xlink:href", function(d) {

// return d.pointImage;

// })

.attr("x", function(d) {

return d.x - RECT_W / 2 + offset_x;

})

.attr("y", function(d) {

return d.y - RECT_H + offset_y;

})

// .attr("width", RECT_W)

// .attr("height", RECT_H)

.on("click", function(d, i) {

if (that.isLargeScreen) {

that.openModel(d);

}

})

.append("xhtml:body")

.attr("xmlns", "http://www.w3.org/1999/xhtml")

.attr("style", "-webkit-text-size-adjust: none;")

.html(function(d) {

return ' <i class="iconfont icon-qipao" style="font-size:20px; transform: scale(2);"></i> <i class="iconfont icon-dianqi1" style="font-size:10px; color:red; position: absolute; left: 4px;top: 4px;">';

});

 

实现原理：https://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/

真实产品经理一句话，开发人员累几天。