У меня есть файл SVG, который нарисован на белом фоне.
Если пользователь выбирает отображение на черном фоне, все пути, отображаемые как черный, исчезают.
Можно ли изменить все элементы в файле SVG, которые отображаются черным, чтобы они отображались белым? Включая пути, текст и т. Д.
SVG просматривается в браузере, поэтому, если это можно сделать в CSS и javascript, я бы хотел сделать это таким образом.
Извините: в SVG 256 цветов.
Я составил тестовый svg следующим образом:
<svg
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="fgc">
<stop stop-color="blue"/>
</linearGradient>
</defs>
<g id="layer1" >
<rect
style="stroke:url(#fgc);fill: none;"
id="rect10"
width="110"
height="75"
x="50"
y="55" />
</g>
</svg>
Я звоню по этому поводу со страницы HTML:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="application/x-javascript">
var drg="";
var svgDoc="";
var svgItem="";
window.onload=function() {
drg = document.getElementById("drawing");
svgDoc = drg.contentDocument;
svgItem = svgDoc.getElementById("fgc");
console.log(svgItem.getAttribute("stop-color"));
svgItem.setAttribute("stop-color", "red");
console.log(svgItem.getAttribute("stop-color"));
};
</script>
</head>
<body>
<object id="drawing" data="drawing.svg" type="image/svg+xml" width="200" height="150"></object>
</body>
</html>
console.log (svgItem.getAttribute ("stop-color")) печатает "null" в консоли браузера до svgItem.setAttribute ("stop-color", "red") и "red" после него .
Прямоугольник отображается синим цветом.
Ясно, что изменение атрибута 'stop-color' на красный в окне .onload не будет работать, потому что изображение SVG уже загружено. Как настроить графическое отображение так, чтобы оно отображалось красным перед загрузкой?
Кроме того, я ожидаю, что console.log (svgItem.getAttribute («stop-color»)) даст мне «синий» перед изменением, но это даст мне «ноль», что должно означать, что я изменяю неправильный атрибут