是否可以在浏览器中编辑svg：图像样式？ （使用D3）

Question

我使用D3将现有的SVG图像加载到我的SVG上。

如果我要创建自己的元素，我可以轻松编辑它们的笔触/填充等。

但是对于图像元素，我似乎无法编辑它们。例如：

<image height="32" width="32" xlink:href="some.svg" x="10" y="20"></image>

尝试使用D3更改其属性完全没有效果。例如，如果我这样添加它：

svg.append('svg:image')
  .attr('height', SYMBOL_SIZE)
  .attr('width', SYMBOL_SIZE)
  .attr('xlink:href', "some.svg")
  .style('stroke', 'blue')
  .style('fill', 'blue')
  .style('cursor', 'move')

它接受我的x，y，高度，宽度和光标attrs /样式，但完全忽略填充/描边。我也无法添加边框。

有什么方法可以解决这个问题吗？

Answer 1

我能够通过使用d3.xml()

导入我需要的图像来解决此问题

这个例子抓住了晚礼服并给了他一些漂亮的粉红色口红。

  d3.xml "http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg", "image/svg+xml", (xml) ->
    importedNode = document.importNode(xml.documentElement, true)
    svg.node().appendChild(importedNode.cloneNode(true))
    svg.selectAll('#path119').style fill: 'pink', stroke: 'red'
    svg.selectAll('#path120').style fill: 'red', stroke: 'pink'

Answer 2

<image>元素引用的文档的DOM无法访问。一旦引用的文档以正确的比例和位置呈现，它基本上是一个位图。就像你引用了JPEG或PNG一样。

请参阅：http://www.w3.org/TR/SVG/struct.html#ImageElement

  

处理“图像”的结果始终是四通道RGBA   结果

与在HTML中执行等效操作时相同。例如：

<img src="some.svg"/>