Bagaimana untuk membuat bayangan sisipan dalam SVG

Question

Saya perlu membuat kotak dengan bayang sebaris, sama seperti CSS3 mempunyai bayangan kotak sebaris. Apa yang saya temui setakat ini ialah penapis dengan feGaussianBlur, tetapi masalahnya ialah ia juga menambah bayang di luar kotak, yang saya tidak mahu. Ini kod yang saya ada setakat ini:

<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>

Saya membuat demo dan membandingkan kod ini dengan hasil pengeluaran CSS yang diingini. Penapis ini berfungsi bukan sahaja pada segi empat tepat, tetapi juga pada trapezoid dan poligon yang lebih kompleks.

Saya telah mencuba menggunakan RadialGradient, tetapi itu juga tidak bagus kerana ia menjadikan kecerunan bulat.

Answer 1

Kebanyakannya berdasarkan percubaan yang saya temui, inilah yang saya hasilkan:

<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)"/>

Nyahkomen yang terakhir jika anda ingin melihat padding 。不幸的是，fill="transparent" tidak akan memberikan penapis alpha yang boleh digunakan, dan ia tidak akan menghasilkan bayang.

Answer 2

Jika anda mempunyai padding padat, anda boleh menambah

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

Di penghujung penapis, ia akan menjepit kabur mengikut bentuk SourceGraphic. Oleh kerana bentuk anda telus, anda perlu melakukan lebih banyak kerja. Saya mengesyorkan menggunakan isian separa lutsinar pada bentuk asal supaya anda mendapat pemilihan gubahan yang betul, dan menggunakan feFuncA untuk menyifarkan isian untuk operasi akhir. Ini ternyata sangat rumit. Tetapi inilah penyelesaian yang sesuai untuk sebarang bentuk garisan pepejal

<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>

Ini cabang biola saya: http://jsfiddle.net/kkPM4/