Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

Pages: 1

 

#1 Wed 21 April 2021 12:22

nico-29
Participant assidu
Lieu: Brest
Date d'inscription: 2 Jun 2006
Messages: 185

QGIS 3: symbole svg avec css

Bonjour,

Je cherche à appliquer un symbole svg à ma couche, mais ce symbole utilise un fichier css pour la définition de certains paramètres (color, ...).

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="daySvgStyle.css" type="text/css"?><svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" xml:space="preserve" style="shape-rendering:geometricPrecision; fill-rule:evenodd;" width="3.61mm" height="1.96mm" viewBox="-1.8 -0.16 3.61 1.96">
  <title>EMAREMG1</title>
  <desc>Embedded symbol</desc>
  <rect class="symbolBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <rect class="svgBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <path d=" M -1.64,0 L 0.01,1.64 L 1.65,0" class="sl f0 sCHMGD" style="stroke-width: 0.32;"/>
  <circle class="pivotPoint layout" fill="none" cx="0" cy="0" r="1"/>
</svg>

J'ai bien mon fichier css dans le même répertoire que mon svg, mais qgis ne semble pas le prendre en compte.
Pourquoi?

PS : si j'ouvre le svg avec un logiciel image (gimp), les styles sont bien pris en compte

Merci,
Nico

Dernière modification par nico-29 (Wed 21 April 2021 12:23)

Hors ligne

 

#2 Wed 21 April 2021 15:00

Sylvain M.
Participant assidu
Lieu: Saint-Pierre-des-Nids (53)
Date d'inscription: 8 Sep 2005
Messages: 995

Re: QGIS 3: symbole svg avec css

Peut-être en embarquant le style CSS directement dans le SVG ?

Voir par exemple ce sujet :
https://stackoverflow.com/questions/490 … bedded-svg

Cette réponse "simple" me semblerait à tester :

You can do this without javsscrpt by putting a style block with your styles inside the SVG file itself.

Code:

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>
Sylvain M.

Hors ligne

 

#3 Wed 21 April 2021 16:15

nico-29
Participant assidu
Lieu: Brest
Date d'inscription: 2 Jun 2006
Messages: 185

Re: QGIS 3: symbole svg avec css

ça ne fonctionne pas, même en mettant le style directement dans le svg.
pourtant en regardant ici :
http://tutorials.jenkov.com/svg/svg-and-css.html
ca devrait marcher.

un problème avec l'interpréteur svg de QGIS?

Nico

Hors ligne

 

#4 Wed 21 April 2021 16:56

michel56
Participant assidu
Lieu: Lorient
Date d'inscription: 14 Jul 2012
Messages: 474

Re: QGIS 3: symbole svg avec css

Bonjour,

Ouvre ton SVG avec Firefox pour vérifier.


Si tu veux utiliser le style de ton fichier daySvgStyle.css tu insères le contenu du css entre les balises:

Code:

<script>
contenu du fichier css
</script>

Dernière modification par michel56 (Wed 21 April 2021 17:06)

Opérateur cartographique & DAO & PHP.

Hors ligne

 

#5 Wed 21 April 2021 18:09

nico-29
Participant assidu
Lieu: Brest
Date d'inscription: 2 Jun 2006
Messages: 185

Re: QGIS 3: symbole svg avec css

ça ne fonctionne pas, même en mettant le style directement dans le svg.
pourtant en regardant ici :
http://tutorials.jenkov.com/svg/svg-and-css.html
ca devrait marcher.

un problème avec l'interpréteur svg de QGIS?

Nico

Hors ligne

 

#6 Wed 21 April 2021 18:17

Sylvain M.
Participant assidu
Lieu: Saint-Pierre-des-Nids (53)
Date d'inscription: 8 Sep 2005
Messages: 995

Re: QGIS 3: symbole svg avec css

Si ce n'est pas confidentiel, tu peux peut-être partager le SVG (ça c'est déjà fait) et le CSS (daySvgStyle.css) ?

Sylvain M.

Hors ligne

 

#7 Wed 21 April 2021 18:57

michel56
Participant assidu
Lieu: Lorient
Date d'inscription: 14 Jul 2012
Messages: 474

Re: QGIS 3: symbole svg avec css

Je me suis trompé dans le code: (c'est style et pas script)

Si tu veux utiliser le style de ton fichier daySvgStyle.css tu insères le contenu du css entre les balises:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="daySvgStyle.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" xml:space="preserve" style="shape-rendering:geometricPrecision; fill-rule:evenodd;" width="3.61mm" height="1.96mm" viewBox="-1.8 -0.16 3.61 1.96">
<style>
contenu du fichier css
</style>
  <title>EMAREMG1</title>
  <desc>Embedded symbol</desc>
  <rect class="symbolBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <rect class="svgBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <path d=" M -1.64,0 L 0.01,1.64 L 1.65,0" class="sl f0 sCHMGD" style="stroke-width: 0.32;"/>
  <circle class="pivotPoint layout" fill="none" cx="0" cy="0" r="1"/>
</svg>

Dernière modification par michel56 (Wed 21 April 2021 19:04)

Opérateur cartographique & DAO & PHP.

Hors ligne

 

#8 Thu 22 April 2021 12:35

nico-29
Participant assidu
Lieu: Brest
Date d'inscription: 2 Jun 2006
Messages: 185

Re: QGIS 3: symbole svg avec css

J'ai testé ce symbole :

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="SVGStyle.css" type="text/css"?><svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" xml:space="preserve" style="shape-rendering:geometricPrecision; fill-rule:evenodd;" width="3.61mm" height="1.96mm" viewBox="-1.8 -0.16 3.61 1.96">
  <title>EMAREMG1</title>
  <desc>Embedded symbol</desc>
  <metadata>
    <iho:S100SVG xmlns:iho="http://www.iho.int/SVGMetadata">
      <iho:Description iho:publisher="IHB" iho:creationDate="2014-06-09" iho:source="S52Preslib4.0" iho:format="S100SVG" iho:version="0.1"/>
    </iho:S100SVG>
  </metadata>
  <style>
        .layout {display:none}
        .symbolBox {stroke:black;stroke-width:0.32;}
        .svgBox {stroke:blue;stroke-width:0.32;}
        .pivotPoint {stroke:red;stroke-width:0.64;}
        .sl {stroke-linecap:round;stroke-linejoin:round}
        .f0 {fill:none}
        .sCHMGD {stroke:#C045D1}
  </style>
  <rect class="symbolBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <rect class="svgBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <path d=" M -1.64,0 L 0.01,1.64 L 1.65,0" class="sl f0 sCHMGD" style="stroke-width: 0.32;"/>
  <circle class="pivotPoint layout" fill="none" cx="0" cy="0" r="1"/>
</svg>

Quand je l'ouvre dans un navigateur, il s'affiche correctement, mais si je l'utilise comme style QGIS, j'ai seulement un triangle noir (cf. pj)





Nico

Dernière modification par nico-29 (Thu 22 April 2021 12:35)

Fichier(s) joint(s) :
Pour accéder aux fichiers vous devez vous inscrire.

Hors ligne

 

#9 Thu 22 April 2021 12:59

michel56
Participant assidu
Lieu: Lorient
Date d'inscription: 14 Jul 2012
Messages: 474

Re: QGIS 3: symbole svg avec css

Bonjour,

Pourquoi tu ne modifies pas ton SVG avec un logiciel comme Inkscape.

https://inkscape.org/fr/

Dernière modification par michel56 (Thu 22 April 2021 13:01)

Opérateur cartographique & DAO & PHP.

Hors ligne

 

#10 Thu 22 April 2021 22:20

dave31
Participant actif
Date d'inscription: 17 Feb 2017
Messages: 82

Re: QGIS 3: symbole svg avec css

Bonsoir,

Dans la balise path, le style déclaré semble prendre le dessus sur les classes.
De plus, il manque le point virgule à la fin des 3 classes.

ça fonctionne sans le style dans la balise path

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="SVGStyle.css" type="text/css"?><svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" xml:space="preserve" style="shape-rendering:geometricPrecision; fill-rule:evenodd;" width="3.61mm" height="1.96mm" viewBox="-1.8 -0.16 3.61 1.96">
  <title>EMAREMG1</title>
  <desc>Embedded symbol</desc>
  <metadata>
    <iho:S100SVG xmlns:iho="http://www.iho.int/SVGMetadata">
      <iho:Description iho:publisher="IHB" iho:creationDate="2014-06-09" iho:source="S52Preslib4.0" iho:format="S100SVG" iho:version="0.1"/>
    </iho:S100SVG>
  </metadata>
  <style>
        .layout {display:none}
        .symbolBox {stroke:black;stroke-width:0.32;}
        .svgBox {stroke:blue;stroke-width:0.32;}
        .pivotPoint {stroke:red;stroke-width:0.64;}
        .sl {stroke-linecap:round;stroke-linejoin:round;}
        .f0 {fill:none;}
        .sCHMGD {stroke:#C045D1;stroke-width:0.32;}
  </style>
  <rect class="symbolBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <rect class="svgBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <path d=" M -1.64,0 L 0.01,1.64 L 1.65,0" class="sl f0 sCHMGD"/>
  <circle class="pivotPoint layout" fill="none" cx="0" cy="0" r="1"/>
</svg>

ou tous les styles dans la balise path

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="SVGStyle.css" type="text/css"?><svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" xml:space="preserve" style="shape-rendering:geometricPrecision; fill-rule:evenodd;" width="3.61mm" height="1.96mm" viewBox="-1.8 -0.16 3.61 1.96">
  <title>EMAREMG1</title>
  <desc>Embedded symbol</desc>
  <metadata>
    <iho:S100SVG xmlns:iho="http://www.iho.int/SVGMetadata">
      <iho:Description iho:publisher="IHB" iho:creationDate="2014-06-09" iho:source="S52Preslib4.0" iho:format="S100SVG" iho:version="0.1"/>
    </iho:S100SVG>
  </metadata>
  <style>
        .layout {display:none}
        .symbolBox {stroke:black;stroke-width:0.32;}
        .svgBox {stroke:blue;stroke-width:0.32;}
        .pivotPoint {stroke:red;stroke-width:0.64;}
        .sl {stroke-linecap:round;stroke-linejoin:round;}
        .f0 {fill:none;}
        .sCHMGD {stroke:#C045D1;}
  </style>
  <rect class="symbolBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <rect class="svgBox layout" fill="none" x="-1.64" y="0" height="1.64" width="3.29"/>
  <path d=" M -1.64,0 L 0.01,1.64 L 1.65,0" class="sl f0 sCHMGD" style="stroke-width:0.32;stroke:#C045D1;fill:none;stroke-linecap:round;stroke-linejoin:round;" />
  <circle class="pivotPoint layout" fill="none" cx="0" cy="0" r="1"/>
</svg>

Hors ligne

 

 

Pages: 1

Pied de page des forums

Powered by FluxBB