我使用以下标记将SVG文件包含在xhtml或html文件中：
<ImageTexture id='colors' containerField='diffuseTexture' url='http://localhost:3000/system/colorways/images/000/000/015/original/ShirtWithSolidColor03.svg?1544447759'></ImageTexture>
或
<image src="http://localhost:3000/system/colorways/images/000/000/015/original/ShirtWithSolidColor03.svg?1544447759">
因此svg在视图中被正确地呈现到xhtml或html文件中
但我想更改svg文件中存在的路径标记样式填充的属性。这是使用xhtml或html中包含的jquery或javascript读取svg文件的任何方式
我正在使用ruby on rails进行开发。提前感谢
您不需要包含它，也不需要更改它并将其包含回来。
1( 加载SVG文件并覆盖填充属性和值。
2( 将SVG插入到图像中。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img>
<script>
const xhr = new XMLHttpRequest()
xhr.open('GET', '/image.svg')
xhr.onload = () => {
if (xhr.status != 200) return;
const svg = xhr.response
.replace(/fill.+;/g, 'fill:blue')
document.querySelector('img').src =
`data:image/svg+xml;charset=utf-8,${svg}`
}
xhr.send()
</script>
</body>
</html>
希望这个帮助：(
您必须将svg引入内联，然后随意修改它。
<img class="svgClass" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"></img>
<script>
document.addEventListener("click", function() {
var el = document.querySelectorAll("img");
var e = el[0]; //or iterate
var xhr = new XMLHttpRequest();
xhr.open("GET", e.getAttribute("src"));
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) e.outerHTML = xhr.responseText;
//svg is inline, access/modify as usual
var elements = document.querySelectorAll('*[fill]');
for (var i = 0; i < elements.length; i++){
if(elements[i].getAttribute('fill') != "#FFF"){
elements[i].setAttribute('fill', "#F00");
elements[i].setAttribute('stroke', "#F00");
}
}
};
});
</script>