Question

我试图通过this tutorial作为我正在进行的更大项目的练习。我的实际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>

在教程中说：

让我们使用CSS定位路径（假设我们在这里使用内联SVG，或通过＆＃39;对象＆＃39;）

这很好，因为只是上传没有复制粘贴的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周

根据建议编辑，但我认为我仍然做错了。

另外，我只在"fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019"中留下style并删除了其他所有内容。这是否意味着我仍然可以分配stroke-dasharray等属性，还是必须先在style内预先定义？

仍希望某人有其他一些意见

Answer 1

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

attributes
CSS样式表
内联样式

您的SVG使用内联样式（ style =＆＃34; fill：none; fill-opacity：1; ... ）。

因此，您的代码是正确的，但无论您使用＆＃34;填充＆＃34;属性，它被内联样式覆盖，因此 svgItem.setAttribute（＆＃34; fill＆＃34;，＆＃34; lime＆＃34;）; 无用。

你需要以某种方式改变内联样式。最简单的解决方案是通过调用：

 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>

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

1 个答案: