javascript - 如何使用 html 或 xhtml 中的图像标签读取和更改 svg 文件内的元素？-6ren

javascript - 如何使用 html 或 xhtml 中的图像标签读取和更改 svg 文件内的元素？

转载作者：行者123 更新时间：2023-11-28 17:14:54

24

4

我使用以下标签将 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 会在 View 上正确渲染到 xhtml 或 html 文件中。
但我想更改 svg 文件中存在的路径标记样式填充的属性，他们可以使用 xhtml 或 html 中包含的 jquery 或 javascript 读取 svg 文件。
我正在使用 ruby on Rails 进行开发。提前致谢

最佳答案

您不需要包含它、更改它并重新包含它。

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>

希望这有帮助:)

关于javascript - 如何使用 html 或 xhtml 中的图像标签读取和更改 svg 文件内的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53723079/

24

4

0

文章推荐： python - pyparsing 一个可能包含也可能不包含值的字段

首页

博学

6Ren·AI

商城

javascript - 如何使用 html 或 xhtml 中的图像标签读取和更改 svg 文件内的元素？

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内

首页

博学

6Ren·AI

商城

javascript - 如何使用 html 或 xhtml 中的图像标签读取和更改 svg 文件内的元素？

标签)？ 根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内