क्या एक एसवीजी फिल्टर प्रभाव

Question

पर एक ट्रांसफॉर्म मैट्रिक्स को लागू करना संभव है, मैं एसवीजी में पुश पिन जैसे आईफोन मैप्स को फिर से बनाने की कोशिश कर रहा हूं और मेरे पास पिन भाग है लेकिन मैं सोच रहा हूं कि छाया से कैसे निपटें। मैंने ड्रॉप छाया उदाहरणों का एक गुच्छा देखा है, लेकिन वे सभी कुछ पिक्सेल द्वारा मूल को ऑफसेट कर रहे हैं। क्या ट्रांसफॉर्म मैट्रिक्स को फ़िल्टर में लागू करना संभव है, इसलिए यह खराब हो गया है?

यहाँ अब तक पिन एसवीजी है:

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