5

SVGで画鋲のようなiPhoneマップを再現しようとしていますが、ピンの部分が下になっていますが、影にどのように取り組むのか疑問に思っています。ドロップシャドウの例をたくさん見てきましたが、それらはすべて、オリジナルを数ピクセルオフセットしているだけです。変換行列をフィルターに適用して、歪むようにすることは可能ですか？

これまでのピンSVGは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <radialGradient id="SVGID_1_" cx="29.3623" cy="31.1719" r="11.6241" gradientTransform="matrix(1.1875 0 0 1.1875 -30.8438 -30.2812)" gradientUnits="userSpaceOnUse">
            <stop  offset="0.2637" style="stop-color:#FF0000"/>
            <stop  offset="1" style="stop-color:#6D0000"/>
        </radialGradient>
    </defs>
    <rect x="9.251" y="13.844" fill="#CCCCCC" stroke="#7C7C7C" width="2" height="24.83"/>
    <circle fill="url(#SVGID_1_)" stroke="#660000" cx="10.5" cy="11.5" r="9.5"/>
    <ellipse transform="matrix(0.8843 0.4669 -0.4669 0.8843 4.475 -1.6621)" fill="#FFCCCC" cx="6.591" cy="8.199" rx="1.538" ry="1.891"/>
</svg>

ありがとう！

4

1 に答える 1

4

これは、回転するための簡単な変換とフィルターです。スキューも行いたい場合は、回転ラインをマトリックスのものに置き換える必要があります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <radialGradient id="SVGID_1_" cx="29.3623" cy="31.1719" r="11.6241" gradientTransform="matrix(1.1875 0 0 1.1875 -30.8438 -30.2812)" gradientUnits="userSpaceOnUse">
            <stop  offset="0.2637" style="stop-color:#FF0000"/>
            <stop  offset="1" style="stop-color:#6D0000"/>
        </radialGradient>
        <filter id="drop-shadow">
          <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" />

        </filter>
    </defs>
    <g id="pin">
        <rect x="9.251" y="13.844" fill="#CCCCCC" stroke="#7C7C7C" width="2" height="24.83"/>
        <circle fill="url(#SVGID_1_)" stroke="#660000" cx="10.5" cy="11.5" r="9.5"/>
        <ellipse transform="matrix(0.8843 0.4669 -0.4669 0.8843 4.475 -1.6621)" fill="#FFCCCC" cx="6.591" cy="8.199" rx="1.538" ry="1.891"/>
    </g>

     <use xlink:href="#pin" transform="rotate(60 10.251 38.674)" filter="url(#drop-shadow)"/>
</svg>
于 2011-10-29T00:17:32.560 に答える