এসএসজি ড্রপ শ্যাডো CSS3 ব্যবহার করে


378

সিএসএস 3 ব্যবহার করে কোনও এসভিজি উপাদানটির জন্য ড্রপ শেড স্থাপন করা কি সম্ভব?

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

আমি ফিল্টার প্রভাব ব্যবহার করে ছায়া তৈরি সম্পর্কে কিছু মন্তব্য দেখেছি। একা সিএসএস ব্যবহার করার উদাহরণ আছে কি? নীচে একটি কার্যকারী কোড দেওয়া হয়েছে যেখানে কুসরের স্টাইলটি সঠিকভাবে প্রয়োগ করা হয়েছে তবে কোনও ছায়া প্রভাব নেই। দয়া করে কমপক্ষে কোডের বিট দিয়ে ছায়া প্রভাব পেতে আমাকে সহায়তা করুন।

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}	
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">	
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

উত্তর:


353

এখানে 'ফিল্টার' বৈশিষ্ট্যটি ব্যবহার করে কিছু এসভিজিতে ড্রপশো প্রয়োগের উদাহরণ । আপনি যদি ড্রপস্যাডোটির অস্বচ্ছতা নিয়ন্ত্রণ করতে চান তবে এই উদাহরণটি দেখুনslopeঅ্যাট্রিবিউট নিয়ন্ত্রণ dropshadow দিতে কত অস্বচ্ছতা।

উদাহরণ থেকে প্রাসঙ্গিক বিট:

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

বক্স-শ্যাডো সিএসএস বাক্সগুলিতে কাজ করার জন্য সংজ্ঞায়িত করা হয়েছে (পড়ুন: আয়তক্ষেত্রগুলি), যখন এসভিজি কেবল আয়তক্ষেত্রের চেয়ে কিছুটা বেশি অভিব্যক্তিক। এসভিজি ফিল্টারগুলির মাধ্যমে আপনি কী করতে পারেন সে সম্পর্কে আরও কিছু জানতে এসভিজি প্রাইমারটি পড়ুন ।


1
ড্রপস্যাডোয়ের অস্বচ্ছতা নিয়ন্ত্রণ করার কোনও উপায় আছে?
হিউ গিনি

5
@ হুগগ্রিনিটি: হ্যাঁ, অবশ্যই এটি করার একটি উপায়ের উদাহরণ এখানে দেওয়া হয়েছে, xn--dahlstrm-t4a.net/svg/filters/…slopeআপনি কতটা অস্বচ্ছতা চান তা টুইট করার বৈশিষ্ট্যটি কেবল পরিবর্তিত করুন ।
এরিক ডাহলস্ট্রোম

1
@ লোরেঞ্জোপালিডোরি আইই 10 এবং সাফারি 5.2 উভয়ই এসভিজি ফিল্টার সমর্থন করে।
এরিক ডালস্ট্রোম



559

নতুন সিএসএস filterসম্পত্তি ব্যবহার করুন ।

ওয়েবকিট ব্রাউজারগুলি , ফায়ারফক্স 34+ এবং এজ দ্বারা সমর্থিত

আপনি এই পলিফিল ব্যবহার করতে পারেন যা এফএফ <34, আই 6 + সমর্থন করবে।

আপনি এটির মতো ব্যবহার করবেন:

/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
}
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Star_wars2.svg" alt="" class="shadow" width="200">

<!-- Or -->

<svg class="shadow" ...>
    <rect x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>

এই পদ্ধতির box-shadowপ্রভাব থেকে পৃথক হয় যে এটি অস্বচ্ছতার জন্য অ্যাকাউন্ট করে এবং ড্রপ শ্যাডো এফেক্টটি বাক্সে নয় বরং এসভিজি উপাদানটির কোণে প্রয়োগ করে।

দয়া করে দ্রষ্টব্য : ক্লাসটি <svg>কেবলমাত্র উপাদানের উপর স্থাপন করা হলে এই পদ্ধতিটি কার্যকর হয় । আপনি এটি কোনও ইনলাইন এসভিজি উপাদান যেমন ব্যবহার করতে পারবেন না<rect>

<!-- This will NOT work! -->
<svg><rect class="shadow" ... /></svg>

এইচটিএমএল 5 রকসে সিএসএস ফিল্টার সম্পর্কে আরও পড়ুন ।


47
এটি চিত্রগুলির জন্য বা পুরো এসভিজির জন্য, তবে এসভিজির অভ্যন্তরের নির্বাচনের জন্য কাজ করে বলে মনে হচ্ছে। বেহালার
heneryville

13
এটি কোনওভাবেই এসভিজি উপাদানগুলিতে ড্রপ-শ্যাডো প্রয়োগ করার জন্য কাজ করে না। এটা ব্যবহার করোনা. ব্যর্থতার উদাহরণ: jsbin.com/bepurahuwa/1/edit?html,css,js
অ্যান্ডি রে

19
@ অ্যান্ডয়েরে একটি মোহন মত কাজ করে ... jsbin.com/peviso/edit?html,css,js, আউটপুট । আপনি ক্লাসটি <svg> ট্যাগে রেখেছেন।
hitautodestruct

3
@ হাইটাডোডস্ট্রাক্ট হ্যাঁ, এটি এর মতো কাজ করে। বাস্তব সমস্যা আসে যখন আপনি খুব প্রয়োজন একটি উপাদান ফিল্টার প্রয়োগ করুন, কিন্তু অন্যরা নয়।
জুম

3
আমি অনুমান করি যে @ অ্যান্ড্যরে এবং হিটটোডস্ট্রাক্ট উভয়ই সঠিক, কারণ এখানে উল্লেখ করা হয়েছে , এটি একটি ক্রোম রেন্ডারিং ইস্যুর মতো দেখাচ্ছে: ফায়ারফক্স এসভিজি নির্দিষ্ট উপাদানগুলিতে ফিল্টারটি সঠিকভাবে রেন্ডার করছে।
গ্রুবার

71

আপনি সহজেই ড্রপ-শ্যাডো () সিএসএস ফাংশন এবং আরজিবিএ রঙ মান ব্যবহার করে কোনও এসভিজি-উপাদানগুলিতে একটি ড্রপ-শ্যাডো এফেক্ট যুক্ত করতে পারেন। Rgba রঙের মানগুলি ব্যবহার করে আপনি আপনার ছায়ার অস্বচ্ছতা পরিবর্তন করতে পারেন।

img.light-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}

img.dark-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}
<img class="light-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />
<img class="dark-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />


4
@ ফক্সহাউন্ডন এটি অবশ্যই আধুনিক সমাধান এবং এর উত্তর হিসাবে গ্রহণ করা উচিত।
SeedyROM

1
তবে এটি কোনও
এসভিজির

ইন্টারনেট এক্সপ্লোরার 11: ব্যর্থ (কোনও ড্রপ ছায়া নয় তবে মূল এসভিজি চিত্র প্রদর্শিত হবে)। ফায়ারফক্স (রিলিজ এবং ইএসআর): ঠিক আছে। গুগল ক্রোম: ঠিক আছে। এজ লিগ্যাসি: ঠিক আছে।
ক্লিপ

বাঁধ, যদি এটি কেবল এসভিজিতে গ্রুপ এবং আকারে কাজ করে!
ওজি শান

25

আমি খুঁজে পেয়েছি সবচেয়ে সহজ উপায় সঙ্গে feDropShadow। আমি বুঝতে পারি না এমন অবিশ্বাস্যরূপে ছদ্মবেশী ফিল্টার ট্যাগ নাম ব্যবহার করতে আমি আর কখনও ফিরে যাব না।

<filter id="shadow" x="0" y="0" width="200%" height="200%">
  <feDropShadow dx="40" dy="40" stdDeviation="35" flood-color="#ff0000" flood-opacity="1" />
</filter>

4
আমি কিছু পঠন করেছি এবং এখন আমি আপনার উত্তরটি বুঝতে পেরেছি আপনি অবশ্যই উক্ত উত্সাহটি পান। এই উত্তর যথেষ্ট প্রশংসা করা হয় না। তবে আরও কিছুটা ব্যাখ্যা ভাল হবে। উদাহরণস্বরূপ: উদাহরণস্বরূপ: developer.mozilla.org/en-US/docs/Web/SVG/Element/…
নিক্লাস

আপনি পুরোপুরি ঠিক বলেছেন। ধন্যবাদ!
নিক্ক ওয়াং

1

আমি কোনও সিএসএস-সমাধান সমাধান সম্পর্কে সচেতন নই।

যেমনটি আপনি উল্লেখ করেছেন, ফিল্টার হ'ল এসভিজিতে ড্রপ শ্যাডো এফেক্ট তৈরির স্বীকৃতি approach এসভিজি স্পেসিফিকেশন এর একটি উদাহরণ অন্তর্ভুক্ত করে।


3
-webkit-filter: drop-shadow()নিশ্চিতভাবে যাওয়ার উপায়। উত্তরটি @ হাইটাডোডস্ট্রাক্ট দ্বারা দেখুন।
क्লেটিজার্মেকে 1

4
@ क्লেটিজার্মেকে 1 যদি আপনি এটি কেবল ওয়েবকিতে কাজ করতে চান .... তবে হ্যাঁ। আমরা আরও দৃ solution় সমাধান, মিথথিন্সের সন্ধান করছি এবং আমি মনে করি এটি আর সমর্থিত নয়।
ডুদেওয়াদ

@ jbeard4 লিঙ্কটি নষ্ট হয়েছে, আরও ভাল লিখিত সামগ্রী এখানে আটকানো হতে পারে।
এজিওয়ে

1
জমা দেওয়া লিঙ্ক পয়েন্টে Removed: Filter Effects This chapter is no longer part of the SVG specification!!
এফ। হাউরি

1
এটি একটি উত্তর নেই।
Yay295

1

সাদা ছায়া সহ কালো পাঠ্য

আরেকটি উপায়, আমি সাদা ছায়ার জন্য ব্যবহার করেছি (পাঠ্যে): ছায়ার জন্য একটি ক্লোন তৈরি করুন:

দ্রষ্টব্য : xmlns:xlink="http://www.w3.org/1999/xlink"এসভিজি ঘোষণায় এটির প্রয়োজন ।

আসল পাঠ্য মানটি <defs>বিভাগে অবস্থিত , অবস্থান এবং শৈলীর সাথে, তবে কোনও fillসংজ্ঞা ছাড়াই ।

পাঠ্যটি দুটিবার ক্লোন করা হয়েছে: প্রথমটি ছায়ার জন্য এবং দ্বিতীয়টি পাঠ্যের জন্য।

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="70"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <filter id="Blur"><feGaussianBlur stdDeviation="0.8" /></filter>
  <text style="font-family:sans,helvetica;font-weight:bold;font-size:12pt"
      id="Text"><tspan x="12" y="19">
        Black text with white shadow
    </tspan></text>
  </defs>
  <rect style="fill:#8AB" width="640" height="70" />
  <use style="fill:white;" filter="url(#Blur)" xlink:href="#Text"
      transform="translate(1.8,.9)"/>
  <use style="fill:black;" xlink:href="#Text"/>
</svg>

অস্পষ্ট বিচ্যুতি হিসাবে সবচেয়ে বড় মান সহ আরও দূরবর্তী ছায়া :

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="70"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <filter id="Blur"><feGaussianBlur stdDeviation="3" /></filter>
  <text style="font-family:sans,helvetica;font-weight:bold;font-size:12pt"
      id="Text"><tspan x="12" y="19">
        Black text with white shadow
    </tspan></text>
  </defs>
  <rect style="fill:#8AB" width="640" height="70" />
  <use style="fill:white;" filter="url(#Blur)" xlink:href="#Text"
      transform="translate(7,5)"/>
  <use style="fill:black;" xlink:href="#Text"/>
</svg>

আপনি নিয়মিত এসভিজি অবজেক্টের সাথে একই পদ্ধতির ব্যবহার করতে পারেন।

একই প্রয়োজনীয়তার সাথে: বিভাগে কোনও পূরণের সংজ্ঞা নেই<defs> !

<svg xmlns="http://www.w3.org/2000/svg" width="364" height="172"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="Blur"><feGaussianBlur stdDeviation="0.8" /></filter>
    <g transform="matrix(.7,0,0,.7,-117.450795,-335.320895)" id="Img">
        <g transform="matrix(12.997776,0,0,-12.997776,389.30313,662.04015)">
            <path d="m 0,0 -1.107,0 c -0.039,0 -0.067,0.044 -0.067,0.086 0,0.015 0.589,1.914 0.589,1.914 0.021,0.071 0.023,0.073 0.031,0.073 l 0.001,0 c 0.009,0 0.01,-0.002 0.031,-0.073 0,0 0.589,-1.899 0.589,-1.914 C 0.067,0.044 0.037,0 0,0 M 1.493,4.345 C 1.482,4.383 1.448,4.411 1.408,4.414 l -4.065,0 C -2.698,4.41 -2.731,4.383 -2.742,4.346 c 0,0 -2.247,-7.418 -2.247,-7.432 0,-0.037 0.029,-0.067 0.067,-0.067 l 2.687,0 c 0.021,0.008 0.037,0.028 0.042,0.051 l 0.313,1 c 0.01,0.025 0.033,0.042 0.061,0.043 l 2.479,0.002 c 0.027,-0.002 0.051,-0.021 0.061,-0.045 l 0.32,-1 c 0.005,-0.023 0.021,-0.044 0.042,-0.052 0,0 2.642,10e-4 2.644,10e-4 0.037,0 0.068,0.028 0.068,0.065 0,0.013 -2.302,7.433 -2.302,7.433" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,508.27177,644.93113)">
            <path d="m 0,0 -1.651,-0.001 c 0,0 -0.044,0.013 -0.044,0.063 l -10e-4,0.833 c 0,0.05 0.044,0.063 0.044,0.063 l 1.514,0 C 0.038,0.958 0.394,0.87 0.394,0.463 0.394,0.056 0,0 0,0 m 7.916,0.645 3.741,0 0,2.453 -4.81,0 C 6.397,3.098 5.764,2.866 5.401,2.597 5.038,2.328 4.513,1.715 4.513,0.87 c 0,-0.845 0.513,-1.502 0.513,-1.502 0.263,-0.326 0.925,-1.005 0.925,-1.005 0.015,-0.016 0.024,-0.037 0.024,-0.061 0,-0.051 -0.041,-0.092 -0.092,-0.092 l -3.705,0 c -0.451,0.002 -0.482,0.181 -0.482,0.207 0,0.046 0.056,0.075 0.056,0.075 0.169,0.081 0.514,0.35 0.514,0.35 0.732,0.57 0.82,1.352 0.82,1.771 0,0.42 -0.063,1.163 -0.814,1.814 C 1.521,3.078 0.57,3.096 0.57,3.096 l -5.287,0 c 0,0 0,-7.52 0,-7.522 0,-0.024 0.022,-0.043 0.046,-0.043 l 2.943,0 0,2.11 c 0,0.037 0.057,0 0.057,0 l 1.533,-1.54 c 0.545,-0.551 1.446,-0.57 1.446,-0.57 l 5.796,0.001 c 0.989,0 1.539,0.538 1.69,0.688 0.15,0.151 0.651,0.714 0.651,1.647 0,0.932 -0.426,1.409 -0.608,1.628 C 8.675,-0.309 8.029,0.375 7.894,0.517 7.878,0.53 7.868,0.55 7.868,0.572 c 0,0.033 0.019,0.064 0.048,0.073" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,306.99861,703.01559)">
            <path d="m 0,0 c 0.02,0 0.034,0.014 0.04,0.036 0,0 2.277,7.479 2.277,7.486 0,0.02 -0.012,0.042 -0.031,0.044 0,0 -2.805,0 -2.807,0 -0.014,0 -0.023,-0.011 -0.026,-0.026 0,-0.001 -0.581,-1.945 -0.581,-1.946 -0.004,-0.016 -0.012,-0.026 -0.026,-0.026 -0.014,0 -0.026,0.014 -0.028,0.026 L -1.79,7.541 c -0.002,0.013 -0.012,0.025 -0.026,0.025 -10e-4,0 -3.1,0.001 -3.1,0.001 -0.009,-0.002 -0.017,-0.01 -0.02,-0.018 0,0 -0.545,-1.954 -0.545,-1.954 -0.003,-0.017 -0.012,-0.027 -0.027,-0.027 -0.013,0 -0.024,0.01 -0.026,0.023 l -0.578,1.952 c -0.001,0.012 -0.011,0.022 -0.023,0.024 l -2.992,0 c -0.024,0 -0.044,-0.02 -0.044,-0.045 0,-0.004 10e-4,-0.012 10e-4,-0.012 0,0 2.31,-7.471 2.311,-7.474 C -6.853,0.014 -6.839,0 -6.819,0 c 0.003,0 2.485,-0.001 2.485,-0.001 0.015,0.002 0.03,0.019 0.034,0.037 10e-4,0 0.865,2.781 0.865,2.781 0.005,0.017 0.012,0.027 0.026,0.027 0.015,0 0.023,-0.012 0.027,-0.026 L -2.539,0.024 C -2.534,0.01 -2.521,0 -2.505,0 -2.503,0 0,0 0,0" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,278.90126,499.03369)">
            <path d="m 0,0 c -0.451,0 -1.083,-0.232 -1.446,-0.501 -0.363,-0.269 -0.888,-0.882 -0.888,-1.727 0,-0.845 0.513,-1.502 0.513,-1.502 0.263,-0.326 0.925,-1.01 0.925,-1.01 0.015,-0.016 0.024,-0.037 0.024,-0.06 0,-0.051 -0.041,-0.093 -0.092,-0.093 -0.008,0 -6.046,0 -6.046,0 l 0,-2.674 7.267,0 c 0.988,0 1.539,0.538 1.69,0.689 0.15,0.15 0.65,0.713 0.65,1.646 0,0.932 -0.425,1.414 -0.607,1.633 -0.162,0.196 -0.808,0.876 -0.943,1.017 -0.016,0.014 -0.026,0.034 -0.026,0.056 0,0.033 0.019,0.063 0.048,0.073 l 3.5,0 0,-5.114 2.691,0 0,5.101 3.267,0 0,2.466 L 0,0 Z" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,583.96822,539.30215)">
            <path d="m 0,0 -1.651,-0.001 c 0,0 -0.044,0.013 -0.044,0.063 l -10e-4,0.833 c 0,0.05 0.044,0.063 0.044,0.063 l 1.514,0 C 0.038,0.958 0.394,0.87 0.394,0.463 0.394,0.056 0,0 0,0 m 2.178,-1.79 c -0.45,0.002 -0.482,0.181 -0.482,0.207 0,0.046 0.056,0.075 0.056,0.075 0.169,0.081 0.514,0.35 0.514,0.35 0.732,0.57 0.82,1.352 0.82,1.771 0,0.42 -0.063,1.163 -0.814,1.814 C 1.521,3.078 0.57,3.098 0.57,3.098 l -5.287,0 c 0,0 0,-7.522 0,-7.524 0,-0.024 0.022,-0.043 0.046,-0.043 0.005,0 2.943,0 2.943,0 l 0,2.109 c 0,0.038 0.057,0 0.057,0 l 1.533,-1.539 c 0.545,-0.551 1.446,-0.57 1.446,-0.57 l 4.525,0 0,2.679 -3.655,0 z" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,466.86346,556.40203)">
            <path d="m 0,0 -1.107,0 c -0.041,0 -0.067,0.044 -0.067,0.086 0,0.016 0.589,1.914 0.589,1.914 0.021,0.071 0.027,0.073 0.031,0.073 l 0.001,0 c 0.004,0 0.01,-0.002 0.031,-0.073 0,0 0.589,-1.898 0.589,-1.914 C 0.067,0.044 0.04,0 0,0 M 1.49,4.347 C 1.479,4.385 1.446,4.412 1.405,4.414 l -4.065,0 C -2.7,4.412 -2.734,4.385 -2.745,4.348 c 0,0 -2.245,-7.42 -2.245,-7.434 0,-0.037 0.03,-0.067 0.067,-0.067 l 2.687,0 c 0.022,0.007 0.038,0.028 0.043,0.051 l 0.313,1.001 c 0.01,0.024 0.033,0.041 0.061,0.042 l 2.478,0 C 0.687,-2.061 0.71,-2.078 0.721,-2.102 l 0.32,-1 c 0.005,-0.023 0.021,-0.044 0.042,-0.052 0,0 2.642,10e-4 2.644,10e-4 0.037,0 0.067,0.028 0.067,0.066 0,0.012 -2.304,7.434 -2.304,7.434" />
        </g>
    </g>
  </defs>
  <rect style="fill:#8AB" width="364" height="172" />
  <use style="fill:white;" filter="url(#Blur)" xlink:href="#Img"
    transform="translate(1.8,.9)"/>
  <use style="fill:black;" xlink:href="#Img"/>
</svg>


এটি কি কেবল ব্যবহার করা সম্ভব হবে না flood-color?
রবার্ট মনফেরা

Blurছায়াকে কিছুটা ঝাপসা দেখানোর জন্য ব্যবহৃত হয়। আমার দ্বিতীয় পাঠ্য সংস্করণটি দেখুন More distant shadow...(
সবেমাত্র

0

সম্ভবত একটি বিবর্তন, এটি প্রদর্শিত হয় যে ইনলাইন সিএসএস ফিল্টারগুলি একটি নির্দিষ্ট উপায়ে উপাদানগুলির উপর দুর্দান্তভাবে কাজ করে।

ক্লাস বা ইনলাইন উভয় ক্ষেত্রে কোনও এসভিজি উপাদানগুলিতে ড্রপ-শ্যাডো সিএসএস ফিল্টার ঘোষণা করা যায় না কাজ করে, তার আগে উল্লিখিত।

তবে, অন্তত ফায়ারফক্সে নিম্নলিখিত উইজার্ড্রি সহ:

ডিওএম লোডের পরে জাভাস্ক্রিপ্ট সহ ফিল্টার ডিক্লেয়ারেশন ইনলাইন যুক্ত করা হচ্ছে

// Does not works, with regular dynamic css styling:

shadow0.onchange = () => {
  rect1.style.filter = "filter:drop-shadow(0 0 " + shadow0.value + "rem black);"
}

// Okay! Inline styling, appending.

shadow1.onchange = () => {
  rect1.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);"
  rect2.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);"
}
<h4>
Does not works! 
<input id="shadow0" type="number" min="0" max="100" step="0.1">

 | Okay!
<input id="shadow1" type="number" min="0" max="100" step="0.1">

<svg viewBox="0 0 120 70">  
    <rect id="rect1" x="10" y="10" width="100" height="50" fill="#c66" />
    
    <!-- Inline style declaration does NOT works at svg level, no shadow at loading: -->
    <rect id="rect2" x="40" y="30" width="10" height="10" fill="#aaa" style="filter:drop-shadow(0 0 20rem black)" />
    
</svg>

এখানে চিত্র বর্ণনা লিখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.