SVG - dégradé

[Wells]

Bonjour à tous, pour ceux qui gère en SVG (je débute), savez vous si l'on peut faire un dégradé qui va des bords vers le centre, et ceux même dans une forme biscornu.

En fait je cherche a faire cet effet la :

[@lucard]

y'aura plusieurs façon de faire... la plus simple à mon sens : faire un "Inner Glow" façon photoshop


Pour le SVG, il faut utiliser des filtres et des mask pour y arriver:
feGaussianBlur
feComposite
feBlend
feFlood

je te mâche le travail :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg

   xmlnsvg="http://www.w3.org/2000/svg"

   xmlns="http://www.w3.org/2000/svg"

   xmlns:xlink="http://www.w3.org/1999/xlink"

   width="600px"

   height="600px"

   id="Test-rapid">

  <defs>

<!-- la Pattern sera en realite l'image du background qui sera 'recollee' sur la forme -->

    <pattern

       id="MAP"

       height="600px"

       width="600px"

       patternUnits="userSpaceOnUse">

      <image

         xlink:href="http://www.loveinfographics.com/wp-content/uploads/2012/02/european-highway-speed-limits-transport-infographics-600x600.gif"

         y="0"

         x="0"

         id="image9"

         height="600px"

         width="600px" />

    </pattern>

    <!-- on commence le filtre 'InnerGlow' -->

    <filter

       id="InnerGlow"

       color-interpolation-filters="sRGB">

<!-- Flou du bord ;

l'attribut 'stdDeviation' est la distance du flou;

ici je l'ai faite animable grace a <animate> -->

      <feGaussianBlur

         id="GaussianBlur"

         result="GaussianBlurResult">

        <animate attributeName="stdDeviation"

                 values="15;8;5;8;15"

                 dur="3s" repeatCount= "indefinite">

      </feGaussianBlur>

<!-- ici on essaye de compiler les differentes couches de composition pour masquer l'autre cote du bord flou -->

      <feComposite

         id="Composite1"

         in2="GaussianBlurResult"

         result="CompositeResult1"

         in="SourceGraphic"

         operator="in" />

      <feBlend

         id="Blend"

         in2="FloodResult"

         mode="normal"

         in="CompositeResult1"

         result="BlendResult1" />

      <feComposite

         id="GaussianBlur"

         in2="SourceGraphic"

         result="CompositeResult3"

         operator="in"

         in="BlendResult1" />



<!-- feFlood sert a definir la couleur du contour ; animable facilement -->

<feFlood

         id="Flood"

         result="FloodResult"

         in="CompositeResult3"

         flood-opacity="1"

         flood-color="red" />

    </filter>

    

<!-- filtre pour le :hover -->

<filter

       id="InnerGlowOver"

       color-interpolation-filters="sRGB">

      <feGaussianBlur

         id="GaussianBlurOver"

         result="GaussianBlurOverResult"

         stdDeviation="20"/> 

      </feGaussianBlur>

      <feComposite

         id="CompositeOver1"

         in2="GaussianBlurOverResult"

         result="CompositeOverResult1"

         in="SourceGraphic"

         operator="in" />

     

      <feFlood

         id="Flood"

         result="FloodOverResult"

         in="CompositeOverResult3"

         flood-opacity="1">

        <animate attributeName="flood-color"

                 values = "red; gold; red"

                 dur=".5s"

                 repeatCount = "indefinite"

                 />

          <animate attributeName="flood-opacity"

                 values = "1;1"

                 dur="5s"

                 repeatCount = "indefinite"

                 /> </feFlood>

      <feBlend

         id="Blend"

         in2="FloodOverResult"

         mode="normal"

         in="CompositeOverResult1"

         result="BlendOverResult1" />

      <feComposite

         id="GaussianBlurOver"

         in2="SourceGraphic"

         result="CompositeOverResult3"

         operator="in"

         in="BlendOverResult1" />

    </filter>

  </defs>

  <g>

<!-- background -->

    <image

       y="0"

       x="0"

       id="MAP-BG"

       xlink:href="http://www.loveinfographics.com/wp-content/uploads/2012/02/european-highway-speed-limits-transport-infographics-600x600.gif"

       height="600"

       width="600" />

<!-- forme -->

   <path

       style="fill:url(#MAP);stroke:#000000;stroke-width:1px;stroke-opacity:1"

       d="M 148.699,268.448 C 145.898,267.946 [...] 148.699,268.448 z"

       id="path"/>

  </g>

</svg>

#path{

  filter:url(#InnerGlow);

    stroke-opacity:0;

}



#path:hover{

  filter:url(#InnerGlowOver);

  stroke-opacity:0;

}

plein de possibilité, animer les couleurs etc...

Résultat live (avec quelques animations)

[@lucard]

J'ai finalement repensé le filtre, pour qu'il soit encore plus simple :

<filter

       id="SUPERFILTRE">

        <feGaussianBlur

         id="feGaussianBlur3817"

         stdDeviation=""

         result="result1" >

         <animate attributeName="stdDeviation"

                  dur="2s"

                  values="5;5;5;1;15;9;5;5;5"

                  repeatCount="indefinite"/>

      </feGaussianBlur>

      <feComposite

         id="feComposite1"

         in="SourceGraphic"

         in2="result1"         

         result="result2"

         operator="out" />

      <feFlood

         id="feFlood"

         in="result2"

         flood-color=""

         result="result3">

        <animate attributeName="flood-color"

                 dur="2s"

                 repeatCount="indefinite"

                 values="red;red;red;blue;red;red" />

      </feFlood>

      <feComposite

         id="feComposite2"

         in="result3"

         in2="result2"

         operator="in"

         result="result4"

          />

    </filter>

Est-ce suffisamment compréhensible?
Est-ce que ça convient ?

[Wells]

je te remercie de ton aide, j'en était venu à penser que c'etait impossible. Je vais tester tout ca et je reviens vers toi avec qq screen

[Wells]

Le dégradé est sympa, voici mon code :

Code :

<filter id="SUPERFILTRE{@id}">
                        <feGaussianBlur id="feGaussianBlur3817" stdDeviation="30" result="result1" />
                        <feComposite id="feComposite1" in="SourceGraphic" in2="result1" result="result2" operator="out" />
                        <feFlood id="feFlood" in="result2" flood-color="{Couleur}" result="result3" />
                        <feComposite id="feComposite2" in="result3" in2="result2" operator="in" result="result4" />
                    </filter>

        .zonelimite<xsl:value-of select="@id" /> {stroke-linejoin:round;filter:url(#SUPERFILTRE<xsl:value-of select="@id" />);stroke-width:10px;stroke:<xsl:value-of select="Couleur/@perso" />;stroke-opacity:0.8;}

Le truc c que ma bordure ne ressort pas de la couleur que je lui donne. J'ai l'impression que le filtre prend le dessus.

Du coup je n'arrive pas à avoir ma bordure d'une couleur et l'effet d'une autre.

[Ter Rowan]

pour l'histoire de bordure, ce que je fais (dans l'ordre vu qu'il n'y a pas de z index) :

1) je dessine l'image
2) j'applique le filtre
3) je dessine la bordure

[@lucard]

En fait le filtre utilise les valeurs du stroke comme "SourceGraphic" si stroke="40px" alors le filtre aura 40px de plus,


ce que je préconise pour éviter les codes à rallonge et de copier/coller les valeur du path (d) plusieurs fois :
c'est d'utiliser la balise <use>

Code :

<g id="zonelimite" >
   <path id="shape" d="....">
</g>
<use xlink:href="#shape" id="border"/>


#zonelimite<xsl:value-of select="@id" /> {filter:url(#SUPERFILTRE<xsl:value-of select="@id" />);}
#bodrer<xsl:value-of select="@id" /> {stroke-linejoin:round;stroke-width:10px;stroke:<xsl:value-of select="Couleur/@perso" />;stroke-opacity:0.8;}

ça devrait le faire.

[Test online]

[Xenos]

Je pense qu'il serait mieux vue d'utiliser le filtre, en mettant "en cache" le SourceGraphic du départ, et en le superposant au résultat à la fin (mais je n'ai pas le temps de chercher le code exact)

[@lucard]

je ne pense pas que ça soit faisable,
SourceGraphic correspond aux éléments graphiques donc dans ce cas :
le "path" et son "style".

donc appliquer un filtre à "rien" et ensuite dire qu'il faut ajouter le path... cela ne me semble pas correcte.

à moins que "en cache" veuille dire appliquer au "path" avec le style (valeur de "fill" & "filter"), récupérer l'autre bout du style (uniquement le "stroke", je sais pas où ni comment?) et l’appliquer ensuite ?
au final, je ne sais pas trop si c'est "mieux vue". :heu:

[Xenos]

Je pensais à ce genre-là en fait.