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/

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

 

 

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值