SVG - dégradé

[@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)