SVG xlink 使用 JavaScript 导入文件中的颜色区域答案

【问题标题】：Color area in SVG xlink imported file using JavaScriptSVG xlink 使用 JavaScript 导入文件中的颜色区域
【发布时间】：2014-12-20 01:37:52
【问题描述】：

我有以下index.html 文件：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$( document ).ready(function() {
    $("#inline").click(function (event) { $(event.target).attr('style', "fill: yellow"); })
    $("#abc").click(function (event) { $(event.target).attr('style', "fill: yellow"); })
    $("#def").click(function (event) { $(event.target).attr('style', "fill: yellow"); })
    $("#circle2").click(function (event) { $(event.target).attr('style', "fill: yellow"); })
});
</script>
</head>
<body>

<svg id="inline" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="25" stroke="black" stroke-width="3" fill="blue" />
</svg>

<svg id="abc" height="100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image id="def" x="0" y="0" height="500" width="500" xlink:href="red.svg" />
</svg>

</body>
</html>

和文件red.svg:

<svg id="circle2" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="25" stroke="black" stroke-width="3" fill="red" />
</svg>

在浏览器中，我在 index.html 文件中看到 2 个圆圈。蓝色和红色。没关系。

点击后我想改变圆圈的颜色。在“内联”蓝色圆圈处有效。但是在插入的 svg（红色）中没有任何反应。

如何为导入的图像着色？

或者有没有其他工作方式如何导入 svg 文件？我不能使用jQuery.load()，因为我需要从file:// url 导入文件。

【问题讨论】：

标签： javascript jquery html svg xlink

【解决方案1】：

CSS 样式不能跨越文档边界。您可以在#def 上设置样式属性，但它不会被red.svg 的内容继承。

您需要：

(a) 内联 red.svg，或

(b) 嵌入它，让您通过 DOM 访问其内容（通过my_object.contentDocument）

【讨论】：