我正在为如何从该网站附加图标而苦恼 - https://linearicons.com/使用 d3.js 到 svg。
目前，我最大的努力是下载 svg 本身，尽管我还没有弄清楚如何指定大小和颜色 - CSS？
my_svg.append("image")
.attr("class",'apart')
.attr("x", 10)
.attr("y", 10)
.attr("xlink:href","apartment.svg");
这些行没有效果:
.attr("fill","red")
.attr("width", 40)
.attr("height", 40)
理想情况下，我想复制内联 SVG，但无法解决:
<svg class="lnr lnr-user"><use xlink:href="#lnr-user"></use></svg>
我也可以嵌入符号标签，但我还是不知道如何正确引用它。这里有一个工作示例不适用于我，因为我需要动态创建 svg 等...:
非常感谢任何帮助。
最佳答案
字体版本
我不会使用 svg版本的字体，而是使用 font itself .然后，关键是看那个 CSS文件并获取所需图标的Unicode字符，例如home :
.lnr-home:before {
content: "\e800";
}
是Unicode字符:
\ue800
然后您可以使用标准 text元素。在 d3语法:
.append('text')
.attr('font-family', 'Linearicons-Free')
.attr('font-size', '2em' )
.text('\ue800')
运行代码:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.css" />
</head>
<body>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
svg.selectAll('text')
.data(["\ue810", "\ue80e", "\ue854", "\ue884"])
.enter()
.append('text')
.attr('font-family', 'Linearicons-Free')
.attr('font-size', '2em' )
.text(function(d) { return d })
.attr('transform', function(d,i){ return 'translate(' + [(i * 50) + 50, (i * 50) + 50] + ')'; });
</script>
</body>
</html>SVG 版本
如果您决心使用 svg版本，我可以让它工作，但它有点笨拙。首先，您需要有一个现有的 <use>在您的页面上 svgembedder , 然后你可以追加 use元素:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.js"></script>
</head>
<body>
<!-- this needs to be here for svgemedder to work -->
<svg width="0" height="0"><use xlink:href="#dummy"></use></svg>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
svg.selectAll('.icon')
.data(["user", "home", "thumbs-up", "cross"])
.enter()
.append('use')
.attr('width',50)
.attr('height',50)
.attr('transform', function(d,i){ return 'translate(' + [(i * 50) + 50, (i * 50) + 50] + ')'; })
.attr('xlink:href', function(d) { return '#lnr-' + d });
</script>
</body>
</html>关于javascript - D3.js - 将 LinearIcons 附加到 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42042254/