Configuration dans un seul fichier ; Ouvrir notepad++ et enregistrez ce fichier en, le-nom-que-vous-voulez.xml
<svg html="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/2000/svg">
<style><br /> circle:hover {fill-opacity:0.9; stroke-width:2mm;}<br /></style>
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
<circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)">
<circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)">
<circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)">
</g>
</svg>
Ou de manière à séparer le contenu de l'agrémentation ; Ouvrir notepad++ et enregistrez ce fichier en, le-nom-que-vous-voulez.xml :
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<title>Agremente SVG avec CSS</title>
<link rel="stylesheet" type="text/css" media="screen" href="feuille-de-style-cercle.css" />
</head>
<body>
<h1>Agremente SVG avec CSS</h1>
<svg:svg width="12cm" height="12cm">
<svg:g>
<svg:circle cx="6cm" cy="2cm" r="100" style="fill:red;" transform="translate(0,50)" />
<svg:circle cx="6cm" cy="2cm" r="100" style="fill:blue;" transform="translate(70,150)" />
<svg:circle cx="6cm" cy="2cm" r="100" style="fill:green;" transform="translate(-70,150)" />
<svg:rect x="0" y="0" width="12cm" height="12cm" />
</svg:g>
</svg:svg>
</body>
</html>
Vous constaterez un lien par la balise link où se situe le nom du fichier de la feuille de style : feuille-de-style-cercle.css :
circle {
fill-opacity:1; stroke-width:6mm;
}
circle:hover {
fill-opacity:0.5; stroke-width:2mm;
}
rect {
fill:none;
stroke:black;
stroke-width:1;
}
g {
fill-opacity:0.7; stroke:grey; stroke-width:0.1cm;
}
@font-face {
src: url(e:/windows/fonts/GenR102.woff) format("woff"),
url(e:/windows/fonts/GenR102.ttf) format("truetype");
}
h1 {
font-family: Gentium;
}
Pour terminer ouvrez ces deux fichiers dans votre navigateur (Opera, Firefox ou autres) ; Le cercle bleu dont on remarque une baisse de son opacité, est le fait du passage de ma souris sur le cercle.
Dans ce billet, http://hacks.mozilla.org/2009/10/woff/, on nous informe les défauts d'IE8, à savoir qu'il supporte le format .eot et non le .woff:
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.eot); /* for IE */
}
@font-face {
font-family: GentiumTest;
/* Works only in WOFF-enabled browsers */
src: url(fonts/GenR102.woff) format("woff");
}
Articles
Aucun commentaire:
Enregistrer un commentaire