javascript - D3: How to adjust SVG image path elements programmatically? -

using icons data points

inspired ability use svg images data elements, this block demonstrates, wanted take level further , use svg images (svg paths), adjust stroke color & thickness.

here screenshot of block have linked above:

---

using svg paths icons

the code uses image, instead of svg path. mimicked code, pointing equivalent of .attr("xlink:href", "https://github.com/favicon.ico") svg image instead. e.g., .attr("xlink:href", "../images/my_logo.svg"), my_logo.svg icon, similar shown in example above, valid svg element. e.g., my_logo.svg element starts this:

<?xml version="1.0" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 20010904//en"  "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg"  width="900.000000pt" height="900.000000pt" viewbox="0 0 900.000000 900.000000"  preserveaspectratio="xmidymid meet"> <g transform="translate(0.000000,900.000000) scale(0.100000,-0.100000)"> <path d="m4280 8997 c-3 -2 -54 -7 -115 -10 -684 -37 -1449 -290 -2080 -690 -621 -393 -1182 -990 -1525 -1622 -24 -44 -53 -98 -65 -120 -44 -81 -139 -294 

. . .

2310 880 278 21 516 20 785 -6z" stroke="red" stroke-width="2" fill="red" /> 

. . .

---

incorporating these svg path files d3 environment

however, reading svg in incorrectly, treated image. copying example in block mentioned above, things like:

node.append("image") .attr("xlink:href", "https://github.com/favicon.ico") 

specifically, in case trying make scatterplot, code looks like:

var points = svg.selectall('image').data(data)                 .enter().append('image').classed('point', true)                 .attr("xlink:href", "../images/my_logo.svg") 

this brings svg in "image", not allow me adjust stroke width or color or these things wish adjust. instance, if @ elements in console, using d3.selectall("image"), i'll see have access x, y, width, height, etc., normal image, not flexible svg path element.

i know issue because importing icon as image, don't know right way it.

you, of course, can't modify svg that's brought in image. can, however, load svg via ajax , manipulate , inject there. may better off using format not strictly svg it's easier modify , inject. example, svg fragment (just contents of <svg> element) directly injectable , modified through css.

---

here full example demonstrate how can done, using d3.xhr.