Est-il possible d'appliquer une matrice de transformation à un effet de filtre SVG?

Question

Je suis en train de recréer un iphone maps comme push pin en SVG et j'ai la partie pins mais je me demande comment aborder l'ombre. J'ai vu un tas d'exemples d'ombre portée, mais ils ne font que compenser l'original de quelques pixels. Est-il possible d'appliquer une matrice de transformation à un filtre afin qu'il soit faussé?

Voici le SVG pin jusqu'à présent:

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

merci!

Answer 1

Voici une simple transformation et un filtre pour le faire pivoter. Si vous voulez faire l'inclinaison aussi, vous devrez remplacer la ligne de rotation avec des trucs de matrice.

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