-1
Я следующий index.html файл:Color область в SVG XLink импортирован файл с помощью JavaScript
<!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 кругов. Синий и красный. Все хорошо.
Я хочу изменить цвет круга после того, как я нажму на него. На «inline» синем круге это работает. Но в вставленном svg (red) ничего не происходит.
Как я могу импортировать импортированное изображение?
Или есть ли какой-либо другой способ работы с импортом файла svg? Я не могу использовать jQuery.load(), потому что мне нужны файлы импорта с file:// url.