SVGフィルタエフェクトに変換行列を適用することは可能ですか

Question

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

感謝！

Answer 1

ここでは、それを回転させるための単純な変換とフィルタがあります。斜めにしたい場合は、回転線を行列のものに置き換える必要があります。

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