How to manipulate svg with css?

Navigation
2

I'm trying to manipulate svg images with css and I have not really had the slightest success, I guess it's some detail I'm not doing since on the internet there are many examples of this that I'm trying and I guess it's because it works for them all, but I could not even place the svg in the html directly, or through an img tag, or with the css in the html or the svg both internally and externally, I really could not, if someone knows how to do it thank you. Then I leave my code:

vector.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 - The file was created with inkscape, I just want to change the color of the painting, for now, but I have not even been able to do that. The attribute class="cuadrado" I manually place, and as you can set in the second line of the code, I'm inserting the css in the svg image externally. 

<?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 - This file is in the same folder as the svg image, and as you can see it is very very basic. 

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

The file "svg" and the file "css" are in a folder called "img", the file "vector.html" is in the main folder, that is, "img" is a subfolder. I hope you help me.

    
asked by Ricardo Gabriel 22.08.2016 в 21:10
source

4 answers

3

You are very close, so as not to modify your SVG, add the unfortunate !important to overwrite the inline style: 

#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>

Depending on how you wish to manage your SVGs, you could do it in another way:

  • Do not apply any style (inline) to the SVG as such and do it completely from your style sheet.
  • Create an SVG sprite so you can group them and reference them all in the same file.

Edit to use external style sheets:

Normally to use external style sheets, I usually group the svg in a single file and reference them there:

imagenes.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>

style.css 

.imagen1 {
  fill: blue;
}
    
answered by 22.08.2016 / 21:17
source
1

What I would do would be to convert the SVG into a source that are much easier to modify with CSS.

check out this extension of chrome

link

    
answered by 23.08.2016 в 18:32
1

I think that is to use the external svg, to be external its parts are not part of the DOM and so the css can not read them and paste the svg in the html works, I'm also looking to solve that using an external svg

    
answered by 29.08.2016 в 04:13
0

You can change the attributes within the SVG file, without needing a CSS. For this you have to insert the image inside the page loading it from a directory that you have in the application. The code to put the image would be: 

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

Then you create a function where you look for the element within the SVG to change the color.

  

To know what the element is called, you can use Inkscape, loads   the SVG image, select the image, and ungroup all the elements (right button on the image -> Ungroup.

     

Brands which is the one that you want to change the property and press   ctrl + shift + O, a new window will appear on the screen where they are   the properties of the element, is the name Id: patch458   for example.

     

You can change the name if you want to edit   this field and then press Apply which is down in the   window. Do not forget to record the changes in the image.

     

This is the name of what you want to change, remember it to be able to look for it in the application.

On the page you create a function that you call to change the color, which you would have: 

 {
 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
     }

I hope it serves you.

Greetings

    
answered by 12.02.2017 в 22:11
Search in a range of ip's, PostgreSQL AJAX - Load values of .php in a select - Provinces