Comment créer une ombre incrustée en SVG

Question

Je dois créer une boîte avec une ombre en ligne, tout comme CSS3 a une ombre de boîte en ligne. Ce que j'ai trouvé jusqu'à présent est un filtre avec feGaussianBlur, mais le problème est qu'il ajoute également une ombre en dehors des sentiers battus, ce que je ne veux pas. Voici le code que j'ai jusqu'à présent :

<svg>
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="5" />
            <feGaussianBlur in="SourceAlpha" result="blur2" stdDeviation="10" />
            <feGaussianBlur in="SourceAlpha" result="blur3" stdDeviation="15" />
            <feMerge>
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
                <feMergeNode in="SourceGraphic" mode="normal"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="10" y="10" width="100" height="100"
    stroke="black" stroke-width="4" fill="transparent" filter="url(#drop-shadow)"/>
</svg>

J'ai fait une démo et comparé ce code avec le résultat de production CSS souhaité. Ce filtre fonctionne non seulement sur les rectangles, mais aussi sur les trapèzes et les polygones plus complexes.

J'ai essayé d'utiliser RadialGradient, mais ce n'est pas bon non plus car cela rend le dégradé circulaire.

Answer 1

Sur la base principalement des expériences que j'ai trouvées, voici ce que j'ai trouvé :

<defs><filter id="inset-shadow">
    <feOffset dx="10" dy="10"/>                                                         <!-- Shadow Offset -->
    <feGaussianBlur stdDeviation="10"  result="offset-blur"/>                           <!-- Shadow Blur -->
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
    <feFlood flood-color="black" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
    <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
    <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
        <feFuncA type="linear" slope=".75"/>
    </feComponentTransfer>
    <!--<feComposite operator="over" in="shadow" in2="SourceGraphic"/>-->                       <!-- Put shadow over original object -->
</filter></defs>

<rect width="100" height="100" fill="yellow" filter="url(#inset-shadow)"/>

Décommentez le dernier si vous voulez voir le remplissage 。不幸的是，fill="transparent" ne donnera pas au filtre un alpha utilisable, ni ne produira d'ombre.

Answer 2

Si vous avez un rembourrage solide, vous pouvez ajouter

<feComposite operator="in" in2="SourceGraphic"/>

À la fin du filtre, il découpera le flou à la forme du SourceGraphic. Puisque votre forme est transparente, vous devez faire plus de travail. Je recommande d'utiliser un remplissage semi-transparent sur la forme originale afin d'obtenir la bonne sélection de composition, et d'utiliser feFuncA pour remettre à zéro le remplissage pour l'opération finale. Cela s'avère très compliqué. Mais voici une solution qui fonctionne pour n'importe quelle forme de ligne continue

<filter id="inset-shadow" >
            <!-- dial up the opacity on the shape fill to "1" to select the full shape-->
            <feComponentTransfer in="SourceAlpha" result="inset-selection">
                <feFuncA type="discrete" tableValues="0 1 1 1 1 1"/>
            </feComponentTransfer>

            <!-- dial down the opacity on the shape fill to "0" to get rid of it -->
            <feComponentTransfer in="SourceGraphic" result="original-no-fill">
                <feFuncA type="discrete" tableValues="0 0 1"/>
            </feComponentTransfer>

            <!-- since you can't use the built in SourceAlpha generate your own -->
            <feColorMatrix type="matrix" in="original-no-fill" result="new-source-alpha" values="0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 1 0"
/>            

            <feGaussianBlur in="new-source-alpha" result="blur" stdDeviation="5" />
            <feGaussianBlur in="new-source-alpha" result="blur2" stdDeviation="10" />
            <feGaussianBlur in="new-source-alpha" result="blur3" stdDeviation="15" />
            <feMerge result="blur">
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
            </feMerge>
            <!-- select the portion of the blur that overlaps with your shape -->
            <feComposite operator="in" in="inset-selection" in2="blur" result="inset-blur"/>
             <!-- composite the blur on top of the original with the fill removed -->
            <feComposite operator="over" in="original-no-fill" in2="inset-blur"/>            
        </filter>

Voici ma branche de violon : http://jsfiddle.net/kkPM4/