如何读取和改变在html或xhtml中使用image标签包含的svg文件中的元素？[重复]
我使用以下标签在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进行开发。提前感谢。
共有2个答案
您必须将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>
您不需要包含它，更改它并将其包含回去。
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我加载在html，它看起来像这样： 实际的svg文件如下所示： 我希望能够从父html更改此svg中的一些样式，例如将添加到class。这可能吗？
-
我在我的网站上使用svg图标，想把它们的颜色改成红色（它们都是黑色的）。 我试着在img标签上使用css-fill属性，但它不起作用。然后我遇到了对象attr，并尝试使用svg图标，如下所示： 在这里，在对象上应用填充属性什么也不做。关于如何在不使用jQuery的情况下更改svg元素的填充属性的任何想法 JSFIDLE
-
我想使用这种技术并更改SVG颜色，但到目前为止我还没能这样做。我把这个放在CSS中，但我的图像总是黑色的，不管怎么样。 我的代码： null null
-
问题内容： 标签中可以包含哪些有效的html元素（如果有）？ 问题答案： 内联元素（除其他外）可以包含其他内联元素和文本节点。锚点可以包含一个范围，该范围可以包含一个文本节点。 通常，块级元素可以包含内联元素和其他块级元素。通常，内联元素可以仅包含数据和其他内联元素。这种结构上的区别固有的思想是，块元素比内联元素创建“更大”的结构。 在其他的答案指出，你不能嵌套的在。
-
我正在使用Selenium（Java版本）测试一个基于OpenLayers的API。 我想测试一个使用的功能。控制修改功能。我想单击绘制的特征（SVG），然后拖动并检查它们是否存在、可见或隐藏。 我已经画了一个多边形，并且选择了它。见下图： 这些SVG元素的HTML如下所示： 假设我想选择红点。 我试过： 但是它总是返回一个空列表。 我做错了什么？有人能帮我吗？ 多谢了。 编辑1-功能：垂直显示可
-
在邮件中，我想显示一个java变量： 在邮件模板中，我执行以下操作： 在邮件中，它转换为： 如何使变量得到很好的解释。 非常感谢。