We connect SVG through Object:

<object type="image/svg+xml" data="img/krug-2.svg" width="auto" height="28" class="object-class" id="object-id"> Браузер не поддерживает SVG </object>

SVG Code:

 <svg version="1.1" id="svg-id" class="svg-class" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29 29" style="enable-background:new 0 0 29 29;" xml:space="preserve"> <g><path class="st0" d="M14.5,29C6.5,29,0,22.5,0,14.5C0,6.5,6.5,0,14.5,0C22.5,0,29,6.5,29,14.5C29,22.5,22.5,29,14.5,29z M14.5,1 C7,1,1,7,1,14.5C1,21.9,7,28,14.5,28C21.9,28,28,21.9,28,14.5C28,7,21.9,1,14.5,1z"/></g> </svg>

Styling with a script:

 var object = document.getElementById("object-id"); //получаем элемент object var svgDocument = object.contentDocument; //получаем svg элемент внутри object var svgElement = svgDocument.getElementById("svg-id"); //получаем любой элемент внутри svg svgElement.setAttribute("fill", "red"); //меняем атрибуты выбранного элемента

Questions:

  1. How to get an object by class? (getElementsByClassName does not work)

  2. Is it possible to add a style for an SVG object while hover to another element (for example, its parent)?

  • Try getElementsByTagName - Kosta B.
  • @Kosta B. does not work - Amsterdam
  • in general, if svg is url-connected then neither — user33274
  • @ Maxim Lensky why? More? If by id the script catches it and sets styles, why can't it be done by class? - Amsterdam
  • Ie you say that if you access by ID you can customize the SVG that is connected to the URL, I understand correctly? - user33274

0