Javascript 如何在不直接粘贴代码的情况下访问html（最好使用CSS）中的SVG元素？

我正试图把它作为我正在从事的一个更大项目的实践。 我的实际SVG非常大，所以我不希望只是将整个巨大的代码直接复制粘贴到HTML中

但这里是我做的练习，我也不知道如何清理Inkscape中的SVG，但我删除了一些看起来不必要的东西

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   id="svg1"
   version="1.1"
   viewBox="49.595489 30.040314 84.135223 84.305336"
   height="84.305336mm"
   width="84.135223mm">
  <path class="path5076"
     id="path5076"
     d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
     style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

</svg>

教程中说：

假设我们在这里使用内联SVG，让我们使用CSS来定位路径， 或者通过“对象”

这很好，因为上传svg而不复制粘贴正是我想要的。但我不知道现在该怎么办。据我所知，访问SVG内部部分的唯一方法是通过javascript，这是我以前从未做过的，因为我不懂javascript

所以我有这个

<object id="svg1" data="path.svg" type="image/svg+xml"></object>

现在，我试图找出如何访问SVG内部的路径

我试着输入我找到的代码，但没有任何效果

<script>
    window.onload=function() {
    var a = document.getElementById("svg1");
    var svgDoc = a.contentDocument;
    var svgItem = svgDoc.getElementById("path5076");
    svgItem.setAttribute("fill", "lime");
};
    </script>

然后我发现有人说我必须先让SVG加载，所以我添加了

<script>
    var mySVG = document.getElementById("svg1");
 var svgDoc;
 mySVG.addEventListener("load",function() {
      svgDoc = mySVG.contentDocument;
      alert("SVG contentDocument Loaded!");
 }, false);
    </script>

但这似乎也不起作用

这是我第一次尝试JS，因此非常感谢您的帮助。 但是，如果你知道如何使用CSS来实现这一点，请让我知道，我对它更满意，因为在学习两周后，我会更满意，而不是使用JS 0周

根据建议编辑，但我认为我还是做错了

---

而且，我只留下填充：无；填充不透明度：1；中风：febc00；笔划宽度：样式为10.80000019，删除了所有其他内容。这是否意味着我仍然可以指定像stroke dasharray这样的属性，或者它们必须先在样式内部预定义

---

仍然希望有人有其他的输入

样式优先级，从最低到最高，是

属性 CSS样式表 内联样式 SVG使用内联样式style=fill:none；填充不透明度：1

因此，您的代码是正确的，但无论您如何处理fill属性，它都会被内联样式覆盖，因此svgItem.setAttributefill，lime；没用

您需要以某种方式更改内联样式。 最简单的解决方案是通过调用以下命令更改内联样式：

 svgItem.setAttribute("style", svgItem.getAttribute("style").replace("fill:none;","fill:lime;")) 

但您也可以完全删除内联样式，转而使用属性/外部CSS

另一个选项是将内联样式转换为属性：

<script type="text/javascript">
window.onload=function() {
    var a = document.getElementById("svg1");
    var svgDoc = a.contentDocument;
    var svgItem = svgDoc.getElementById("path5076");
    // replace inline style with attributes
    var styleText = svgItem.getAttribute("style");
    svgItem.removeAttribute("style");
    for (let pair of styleText.split(';')) {
     let [key, value] = pair.split(':');
     svgItem.setAttribute(key,value);
    }
    // now you are ready to work with the attributes
    svgItem.setAttribute("fill", "lime");
};
</script>

---

哇，我不知道风格优先。谢谢你让我知道。我尝试了你的代码，但由于某些原因，属性仍然没有被重新分配。另外，使用属性/外部CSS是什么意思？我记得你们说过我不能在将svg上传为object时用CSS编辑属性，这是否意味着我仍然可以分配像stroke dasharray这样的属性。对