SVG ਗਾਊਸੀਅਨ ਬਲੁਰ

SVG ਫਿਲਟਰ ਨੂੰ <defs> ਟੈਗ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਹੈ

ਗਾਊਸੀਅਨ ਬਲੁਰ (Gaussian Blur)

<filter> ਟੈਗ ਨੂੰ ਗਰਾਫਿਕਸ ਨੂੰ ਫਿਲਟਰ ਲਾਉਣ ਲਈ ਕਿਸ ਫਿਲਟਰ ਨੂੰ ਵਰਤਣਾ ਹੈ ਇਸ ਦਾ ਪ੍ਰਤੀਯੋਗਿਤਾ ਹੈ ਜਿਸ ਦੀ ਪਰਿਭਾਸ਼ਾ <filter> ਟੈਗ ਵਿੱਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ?

<filter> ਟੈਗ ਨੂੰ <defs> ਟੈਗ ਅੰਦਰ ਜਾਮੀਨ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ。<defs> ਟੈਗ definitions ਦਾ ਸ਼ਾਬਦਿਕ ਅਰਥ ਹੈ, ਇਹ ਫਿਲਟਰਾਂ ਵਰਗੇ ਵਿਸ਼ੇਸ਼ ਇਲਾਕਿਆਂ ਦੀ ਪਰਿਭਾਸ਼ਾ ਕਰਨ ਲਈ ਪ੍ਰਵਾਨ ਕਰਦਾ ਹੈ

ਹੇਠ ਲਿਖੇ ਕੋਡ ਨੂੰ ਨੋਟਬੁੱਕ ਵਿੱਚ ਕਪੀ ਕਰੋ, ਫਿਰ ਫਾਈਲ ਨੂੰ "filter1.svg" ਨਾਮ ਦੇ ਦਿਓ।ਇਹ ਫਾਈਲ ਤੁਹਾਡੇ web ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਰੱਖੋ:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

ਕੋਡ ਵਿਸ਼ਲੇਸ਼ਣ:

  • <filter> ਟੈਗ ਦਾ id ਪ੍ਰਤੀਯੋਗਿਤਾ ਫਿਲਟਰ ਨੂੰ ਇੱਕ ਅਨੂਠਾ ਨਾਮ ਦੇਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ(ਇਸ ਫਿਲਟਰ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਕਈ ਇਲਾਕਿਆਂ ਵਲੋਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ)
  • filter:url ਪ੍ਰਤੀਯੋਗਿਤਾ ਇਲਾਕੇ ਨਾਲ ਇਲਾਕੇ ਨੂੰ ਫਿਲਟਰ ਨਾਲ ਜੋੜਦਾ ਹੈ।ਜਦੋਂ ਫਿਲਟਰ id ਨਾਲ ਲਿੰਕ ਕਰਨਾ ਹੈ ਤਾਂ # ਚਿੰਨ੍ਹ ਵਰਤਣਾ ਹੈ
  • ਫਿਲਟਰ ਪ੍ਰਭਾਵ ਨੂੰ <feGaussianBlur> ਟੈਗ ਰਾਹੀਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।fe ਪਿਛਲਵਾਚਕ ਸਾਰੇ ਫਿਲਟਰਾਂ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ
  • <feGaussianBlur> ਟੈਗ ਦਾ stdDeviation ਪ੍ਰਤੀਯੋਗਿਤਾ ਹੱਦ ਬਲੁਰ ਦੀ ਮਾਤਰਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
  • in="SourceGraphic" ਇਹ ਹਿੱਸਾ ਪੂਰੇ ਚਿੱਤਰ ਦੁਆਰਾ ਬਣਾਏ ਹੋਣ ਵਾਲੇ ਪ੍ਰਭਾਵ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ

مثال دیکھو

ਦੂਜਾ ਸਟਡਡੇਵੀਏਸ਼ਨ ਮੁੱਲ ਵੱਖ ਹੋਣ ਵਾਲਾ ਉਦਾਹਰਣ

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

مثال دیکھو