svg image 图片无法铺满 circle 的问题解决
引子使用d3.js绘制了力布图后,需要在 // 绘制图片 drawPattern(gContainer) { let that = this; let gPattern = gContainer.append("g").attr("class","g-pattern"); // 添加pattern pattern = gPattern.selectAll("pattern").data(that.nodes,function(node) { return "pattern" + node.id; }); // 赋予宽高 pattern .enter() .append("pattern") .attr("id",function(node) { return "pattern" + node.id; }) .attr("x",0) .attr("y",0) .attr("height",64) .attr("width",64) .append("svg:image"); // 插入图片 pattern .selectAll("image") .data(that.nodes,function(node) { return "pattern-image" + node.id; }) .attr("xlink:href",function(node) { return node.image; }) .attr("x",function(node) { return that.imageHeight; }) .attr("width",function(node) { return that.imageWidth }); }
circles.style('fill',function(node){ return "url(#" + "pattern" + node.id + ")"; }) 实现后的: 发现一个问题就是当图片宽高不一致的时候,会出现无法填充圆圈的问题 问题解决给图片加入 ... 省略代码... pattern .selectAll("image") .data(that.nodes,function(node) { return "pattern-image" + node.id; }) .attr("preserveAspectRatio","none") .attr("xlink:href",function(node) { return node.icon; }) ....省略代码... 一脸懵逼吗.gif 关于preserveAspectRatio
上面尼,我们就是希望图片按照我们指定的宽高使得元素的边界完全匹配视图圆形,因此设置成"none" 参数说明源自:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/preserveAspectRatio (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ASP.NET WebApi使用Swagger做接口文档
- .net – 具有实体框架的存储库模式
- asp.net – 用于Microsoft.Office.Interop.Excel的Excel dl
- asp-classic – 是否有像Visual Studio一样的ASP.NET开发服
- asp.net – Visual studio 2013:无法看到下拉开始使用任何
- asp.net-mvc – 有一种很好的方法来控制显示模板应该如何呈
- 从ASP.NET中的web.sitemap文件构建菜单
- asp.net – .Net SQL Server连接字符串 – 隐藏其他开发人员
- iis – 经典ASP上的500服务器错误 – 无法获得更多详细信息
- asp.net-mvc-4 – 如何在浏览器窗口调整大小时调整带有边框
- asp.net-mvc – 在使用ModelBinder之前更改文化
- asp.net-web-api – Asp.net WebApi将UTC时间字符
- asp.net-mvc – Asp.Net MVC Razor FileUpload H
- 将ExtJS与ASP.NET,Webforms或MVC一起使用?
- 使用C#登录带验证码的网站
- asp.net – 什么是SQL Server Reporting Service
- asp.net – 在内容页面的主页面上设置属性值
- asp-classic – 检查VBScript中是否存在Object
- asp.net-mvc – 我如何在ASP.NET MVC中“多播缓存
- asp.net – Response.Flush()仅适用于Firefox