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

如何使用 css 操作 svg？

  • 772

我正在尝试用 css 操作 svg 图像，但我并没有真正取得丝毫成功，我想这是我没有做的一些细节，因为互联网上有很多这样的例子我正在尝试，我想这是因为它适用于所有人，但我无法将 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>

    索引.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/#/select

    • 1

  3. 我认为这是因为使用了外部 svg，它的部分不是 DOM 的一部分，这就是为什么如果你将 svg 剪切并粘贴到它可以工作的 html 中，css 无法读取它们，我也在研究如何使用外部 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