Question

我使用以下标记将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开发。预先感谢

Answer 1

您必须将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>

Answer 2

您不需要包含它，也可以对其进行更改并重新添加。

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>

希望获得帮助：）

如何使用html或xhtml中的image标签读取和更改svg文件中包含的元素？

2 个答案: