是否可以在浏览器中编辑 svg:image 样式？（使用 D3）答案

【问题标题】：Is it possible to edit an svg:image styles in the browser? (using D3)是否可以在浏览器中编辑 svg:image 样式？（使用 D3）
【发布时间】：2014-07-22 12:03:53
【问题描述】：

我正在使用 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、高度、宽度和光标属性/样式，但完全忽略填充/描边。我也不能加边框。

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

【问题讨论】：

这是一个更改填充颜色的工作演示：jsfiddle.net/u6wX2
您好，感谢您的建议，但我希望在
您需要在包含的 SVG 的 DOM 中进行更改。
是的，想通了，但不确定是否有任何方法可以从父文档中访问 SVG 的 dom？假设我可能必须使用 Ajax 获取它并在将其插入到我的 dom 之前对其进行编辑？
没有<image> 没有。如果要访问嵌入文档的 DOM，则需要使用 <object> 或 <iframe>。

标签： javascript css svg d3.js

【解决方案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'

【讨论】：

【解决方案2】：

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

见：http://www.w3.org/TR/SVG/struct.html#ImageElement

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

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

<img src="some.svg"/>

【讨论】：