时间戳

首页 > 解决方案 > 修改 SVG 文件颤动

flutter - 修改 SVG 文件颤动

问题描述

我有一个人体的 svg 文件，其中包含为每块肌肉制作的痕迹组。我想做一个突出某些肌肉的功能。使用正则表达式不是正确的方法。我尝试使用 xml，但我不确定如何以正确的方式进行操作，也不确定 xml 是否真的是正确的方式。

这是我的 svg 文件的结构：

<svg>
  <g id="Muscles" transform="translate(-0.146 0.364)">
    <g id="Abdominals">
      <path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/>
      <path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/>
    </g>
    ...
    ...
    <g id="Triceps">
      <path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/>
      <path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/>
    </g>
  </g>
</svg>

我正在尝试改变给定肌肉的颜色。

标签： fluttersvg

解决方案

你能做到吗：

let abd = document.getElementById("Abdominals").getElementsByTagName("path")
for (let path of abd) {
  path.setAttribute("fill", "red");
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1066.48291015625 731.18701171875 1521.556640625 1144.586181640625" version="1.1" >
  <g id="Muscles" transform="translate(-0.146 0.364)">
    <g id="Abdominals">
      <path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/>
      <path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/>
    </g>
    <g id="Triceps">
      <path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/>
      <path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/>
    </g>
  </g>
</svg>

这是最简单的方法，例如通过它们的 ID 获取路径元素，然后像往常一样更改它们的属性。您不必更改组的所有路径子元素的属性，因为您检索了它们的整个集合等。

推荐阅读