Home / Questions / 21327
Accepted
Ricardo Gabriel
Asked: 2020-08-23 11:10:14 +0800 CST 2020-08-23 11:10:14 +0800 CST

Как манипулировать svg с помощью css?

  • 772

Я пытаюсь манипулировать svg-изображениями с помощью css, и на самом деле у меня не было ни малейшего успеха, я думаю, это какая-то деталь, которую я не делаю, поскольку в Интернете есть много примеров этого, которые я пытаюсь, и я представляю это потому, что это работает для всех, но я не смог разместить svg в html напрямую, ни через тег img, ни с помощью css в html или в svg как внутри, так и снаружи, я действительно не смог к, если кто-то знает, как это сделать, я был бы признателен. Вот мой код:

вектор.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Vector</title>
	<style type="text/css">
		*
		{
			margin: 0px;
			padding: 0px;
		}

		html, body
		{
			height: 100%;
		}

		body
		{
			background-color: red;
		}
	</style>
</head>
<body>
	<img src="img/drawing.svg" alt="svg">
</body>
</html>

drawing.svg — файл был создан с помощью inkscape, я просто хочу изменить цвет окна, но я даже не смог этого сделать. class="cuadrado"Я помещаю атрибут вручную, и, как вы можете видеть во второй строке кода, я вставляю CSS в изображение svg извне.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="epa.css"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <rect
       y="233.69289"
       x="102.70579"
       height="270.90512"
       width="315.55981"
       id="rect3336"
       style="fill:#00ff00;fill-opacity:1"
       class="cuadrado"/>
  </g>
</svg>

epa.css — этот файл находится в той же папке, что и изображение svg, и, как вы можете видеть, он очень, очень прост.

#rect3336
{
  fill: blue;
  fill-opacity:1;
}

Файл "svg" и файл "css" находятся в папке "img", файл "vector.html" находится в основной папке, т.е. "img" является подпапкой. Надеюсь, вы мне поможете.

html

4 Answers

  1. Best Answer

    Вы совсем рядом, чтобы не модифицировать свой SVG, добавьте в него неудачный !important, чтобы он переопределял встроенный стиль:

    #rect3336 {
   fill:#ff0000 !important;
  }
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="epa.css"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <rect
       y="233.69289"
       x="102.70579"
       height="270.90512"
       width="315.55981"
       id="rect3336"
       style="fill:#00ff00;fill-opacity:1"
       class="cuadrado"/>
  </g>
</svg>

    В зависимости от того, как вы хотите обрабатывать свой SVG, вы можете сделать это по-другому:

    • Не применяйте какие-либо (встроенные) стили к самому SVG и делайте это полностью из своей таблицы стилей.
    • Создайте спрайт SVG, чтобы вы могли группировать и ссылаться на них всех в одном файле.

    Изменить для использования внешних таблиц стилей:

    Обычно для использования внешних таблиц стилей я обычно группирую svg в один файл и ссылаюсь на них там:

    изображения.svg

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="cuadrado" viewBox="0 0 744.09448819 1052.3622047" height="297mm" width="210mm">
      <rect
        y="233.69289"
        x="102.70579"
        height="270.90512"
        width="315.55981"/>
    </symbol>
    <!-- otros svg -->
  </svg>

    index.html

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Vector</title>
    <link href="estilo.css" rel="stylesheet">
</head>
<body>
    <svg class="imagen1">
      <use xlink:href="imagenes.svg#cuadrado"></use>
    </svg>
</body>
</html>

    стиль.css

    .imagen1 {
  fill: blue;
}
    • 4

  2. Что бы я сделал, так это преобразовал SVG в шрифт, который намного проще изменить с помощью css.

    проверить это расширение Chrome

    https://icooon.io/app/#/выбрать

    • 1

  3. Я думаю, это из-за использования внешнего svg, будучи внешними, его части не являются частью DOM, и поэтому css не может их прочитать, если вы вырезаете и вставляете svg в html, он работает, я также смотрю, как решить это с помощью внешнего svg

    • 1

  4. Вы можете изменить атрибуты в файле SVG без использования CSS. Для этого вам нужно вставить изображение на страницу, загрузив его из каталога, который у вас есть в приложении. Код для размещения изображения будет таким:

    <object id="diagrama" type="image/svg+xml" data="Imagen/Cavas Pedriel C.svg" style="border: medium ridge #C0C0C0; width: auto; height: 480px;"></object>

    Затем вы создаете функцию, в которой вы ищете элемент в SVG, чтобы изменить цвет.

    Чтобы узнать, как называется элемент, вы можете использовать Inkscape, загрузить изображение SVG, выбрать изображение и разгруппировать все элементы (щелкните изображение правой кнопкой мыши -> Разгруппировать.

    Отметьте, какое свойство вы хотите изменить, и нажмите ctrl+shift+O, на экране откроется новое окно, где находятся свойства элемента, это имя Id: patch458, например.

    Вы можете изменить имя, если хотите, отредактировав это поле, а затем нажав «Применить» в нижней части окна. Не забудьте зафиксировать изменения в изображении.

    Это название того, что вы хотите изменить, запомните его, чтобы иметь возможность искать его в приложении.

    На странице вы создаете функцию, которую вы вызываете для изменения цвета, которая будет иметь:

     {
 var a = document.getElementById("diagrama");  // "diagrama" es el nombre del contenedor de la imagen en la pagina
       var svgDoc = a.contentDocument; //cargo el contenido de la imagen SVG
       temp = "patch458" ;  //nombre del elemento a cambiar
       var svgItem = svgDoc.getElementById(temp); //busco dentro de la imagen el Id que corresponde cargado en temp.
       svgItem.style.setProperty("fill", "red", "");// defino la propiedad fill del elemento seleccionado de color rojo
     }

    Я надеюсь, что это работает для вас.

    Ваше здоровье

    • 0