如何读取和更改使用 html 或 xhtml 中的图像标签包含的 svg 文件中的元素？ [复制]
Posted
技术标签:
【中文标题】如何读取和更改使用 html 或 xhtml 中的图像标签包含的 svg 文件中的元素？ [复制]【英文标题】：How to read and change elements inside the svg file included using image tag in html or xhtml? [duplicate] 【发布时间】：2019-05-12 09:08:31 【问题描述】：我使用以下标签在 xhtml 或 html 文件中包含 SVG 文件：
<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】：你不需要包含它，改变它然后再包含它。
1) 加载您的 SVG 文件并覆盖 fill 属性和值。
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 替换图像标签后，可以使用 jquery 更改图像。谢谢，但我想用 x3d 标签的 xhtml 做这些更改，其中图像标签类似于你必须把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>
【讨论】：
是的，用实际的 svg 替换图像标签后，可以使用 jquery 更改图像。谢谢，但我想用 x3d 标签的 xhtml 做这些更改，其中图像标签类似于以上是关于如何读取和更改使用 html 或 xhtml 中的图像标签包含的 svg 文件中的元素？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
.xhtml 文件中的更改未反映在浏览器中，需要重新启动和构建
如何使用html和javascript中的输入更改多个id颜色
如何使用 angularjs 或 jQuery 更改 HTML 表格中的文本颜色？