Как я могу получить доступ к элементам SVG в html (желательно с CSS), не вставляя код напрямую?

Question

Я пытался проработать этот урок как практику для большого проекта, над которым я работаю.Мой настоящий SVG действительно большой, поэтому я бы предпочел не просто копировать и вставлять весь гигантский код непосредственно в HTML.

Но вот практический пример, который я сделал (я также не уверен, как чистить SVG, сделанные в Inkscape), но я удалил некоторые вещи, которые не казались необходимыми.

<?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 здесь или через «объект»)

, и это здорово, потому что просто загрузить 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 ПОЖАЛУЙСТА , дайте мне знать, мне это гораздо удобнее (настолько комфортно, насколько я могу быть после двух недель изучения, а не 0 недель сJS)

---

Отредактировано согласно предложению, но я думаю, что все еще делаю это неправильно.

Кроме того, я только оставил "fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019" в style и удалил все остальное.Означает ли это, что я все еще могу назначать атрибуты типа stroke-dasharray или они должны быть предварительно определены внутри style сначала?

все еще надеясь, что кто-то имееткакой-то другой ввод

Answer 1

Приоритет стиля от низшего к высшему:

1. атрибуты
2. таблицы стилей CSS
3. встроенные стили

Ваш SVG использует встроенные стили ( style = "fill: none; fill-opacity: 1; ... ).

Таким образом, ваш код верен, но независимо от того, что вы делаете с атрибутом fill, он переопределяется встроенным стилем, поэтому svgItem.setAttribute ("fill", "lime"); is бесполезно.

Вам нужно как-то изменить встроенный стиль. Самое простое решение - изменить встроенный стиль, вызвав:

 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>