28168 sujets

CSS et mise en forme, CSS3

SVG, épaisseurs de lignes en CSS

Bonjour,

Je cherche à comprendre comment gérer (facilement) les épaisseurs d'une image .svg avec le css de mon site.

J'ai compris qu'il était possible d'affecter des id aux éléments du svg. Mais mon problème, c'est les épaisseurs que je spécifie en css sont relatives à la taille du svg. Par exemple, si je place sur la même page une instance de l'image à 25% et une autre à 50%, l'épaisseur des traits de la seconde seront deux fois plus épais que celle de la premiere.

J'aimerais que les deux aient la même épaisseur quelle que soit leur taille ....

Est ce possible ? ou bien je cherche en vain ?

Merci


Un exemple de svg :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:1.41421;">
<g id="Calque">
	<path d="M0,100l0,-100l100,0l0,100l-100,0ZM1,99l98,0l0,-98l-98,0l0,98Z" style="fill:#000;"/>
	<path d="M0,100l100,-100" style="fill:none;stroke-width:1px;stroke:#000;"/>
	<path d="M0,0l100,100" style="fill:none;stroke-width:1px;stroke:#000;"/>
</g></svg>

Modifié par Emma75 (19 Jul 2015 - 09:51)
Modérateur
Bonjour et bienvenue sur le forum,

Le souci vient de l'attribut viewbox et de ta notion d'unité en relatif.

Je 'tinvite à lire ce bout de code :


<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:1.41421;">
        <style type="text/css">
        #Calque > *{
        	fill:none;stroke-width:1px;stroke:#000;
        	vector-effect:non-scaling-stroke;
        }
        </style>
<g id="Calque">
	<path d="M0,0 h 100 v 100 h -100 z" />
	<path d="M0,100l100,-100"/>
	<path d="M0,0l100,100"/>
</g></svg>

Modifié par niuxe (19 Jul 2015 - 18:46)
Merci beaucoup, cela fonctionne ! .... je fais encore quelques expérimentations mais je pense que c'est la bonne solution.
Par contre, les styles inclus dans le svg ne sont pas modifiables par le css de la feuille de style du site ? Existe t-il une méthode ? ou bien c'est super complexe ?
Merci
Modérateur
Emma75 a écrit :
Merci beaucoup, cela fonctionne ! .... je fais encore quelques expérimentations mais je pense que c'est la bonne solution.


Je t'en prie. Smiley smile Si tu constates que le sujet est résolu, n'oublie pas de modifier le titre de ton premier post et indiquer entre crochet "résolu". Je te remercie par avance de cela. Smiley smile

Emma75 a écrit :
Par contre, les styles inclus dans le svg ne sont pas modifiables par le css de la feuille de style du site ? Existe t-il une méthode ? ou bien c'est super complexe ?


Ce sont strictement les mêmes principes qu'en html / css. pas de double id au sein d'un même document (html / svg), utilisation de class etc., etc.

Par contre, l'appel à une feuille de style externe se fait ainsi :


<?xml version="1.0" encoding="utf-8"?>
 <?xml-stylesheet type="text/css" href="external-css.css"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- etc. -->


Le souci est qu'au sein d'un document html 5, je ne crois pas que les tag xml et le DTD soient valides. Alors tu peux paramètrer tes règles CSS au sein d'une feuille de style pour ton site :

#divConteneurSVG #monSuperSvg path{
//etc.
}

Modifié par niuxe (19 Jul 2015 - 19:41)
Ah tu veux dire que l'appel à la feuille de style css se fait depuis le fichier svg ? on ne peut pas gérer les svg d'un site depuis la feuille de style principale de ce site ?

(ou alors il faut appeler la feuille de style du site (qui contiendrait la mise en forme du site, et aussi celles des svg) depuis les différents fichiers svg)
Modifié par Emma75 (19 Jul 2015 - 20:03)
Modérateur
En fait tu as le choix :
insertion de style dans l'élement (ton exemple de code)
insertion de styles générique dans un document svg :

<svg width="400" height="300" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
        	<style type="text/css">
		    	#sapin rect{ fill:peru; } 
		    	#sapin polygon{ fill:forestgreen; }
        	</style>
        	<!-- etc. -->
        </svg>

insertion feuille de style dans un document svg :

<?xml version="1.0" encoding="utf-8"?>
 <?xml-stylesheet type="text/css" href="external-css.css"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- etc. -->

insertion de style au sein d'un document html:

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #global{font-family: sans-serif;max-width: 800px;margin: 0 auto;}
        
		    	#sapin rect{ fill:peru; } 
		    	#sapin polygon{ fill:forestgreen; }
    </style>
</head>
<body>
<div id="global">
        <svg width="400" height="300" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
        	<title>une forêt de sapins</title>
        	<g id="sapin"> 
        		<rect x="45" y="70" width="10" height="20"/>
        		<polygon points="20,70 80,70 60,55 70,55 55,40 65,40 50,20 35,40 45,40 30,55 40,55"/>
        	</g>
        	<use xlink:href="#sapin" transform="translate(100,100) scale(1.5)"/>
        	<use xlink:href="#sapin" transform="translate(10,190) scale(1.2)"/>
        	<use xlink:href="#sapin" transform="translate(300,-20) scale(2)"/>
        	<use xlink:href="#sapin" transform="translate(320,200) scale(0.4)"/>
        	<use xlink:href="#sapin" transform="translate(200,160) scale(0.2)"/>
        	<use xlink:href="#sapin" transform="translate(170,30)"/>
        </svg>
        </div>
</body>
</html>


Bien sûr, tu peux ainsi éditer tes styles dans ta propres css externes de ton site.

Je pense que ce sujet devrait t'intéresser
Modifié par niuxe (19 Jul 2015 - 23:23)
Sujet clos
Aller à