Css3 का उपयोग करके SVG ड्रॉप शैडो

Question

क्या यह संभव है कि css3 का उपयोग करते हुए svg तत्व के लिए ड्रॉप शैड सेट किया जाए, जैसे कुछ

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

मैंने फिल्टर प्रभाव का उपयोग करके छाया बनाने पर कुछ टिप्पणी देखी। क्या अकेले css का उपयोग करने का एक उदाहरण है। नीचे एक कामकाजी कोड है जहां क्यूसर शैली को सही ढंग से लागू किया गया है, लेकिन कोई छाया प्रभाव नहीं है। कृपया कम से कम कोड के साथ छाया प्रभाव प्राप्त करने में मेरी मदद करें।

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>

Answer 1

यहाँ 'फ़िल्टर' प्रॉपर्टी का उपयोग करके कुछ svg पर ड्रॉपशैडो लगाने का एक उदाहरण दिया गया है। यदि आप ड्रॉपडोज की अस्पष्टता को नियंत्रित करना चाहते हैं, तो इस उदाहरण पर एक नज़र डालें । 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)"/>

बॉक्स-छाया को सीएसएस बक्से (रीड: आयताकार) पर काम करने के लिए परिभाषित किया गया है, जबकि svg सिर्फ आयतों की तुलना में थोड़ा अधिक अभिव्यंजक है। SVG प्राइमर पढ़ें और जानें कि आप SVG फ़िल्टर के साथ क्या कर सकते हैं।

Comments

क्या ड्रॉपशेडो की अस्पष्टता को नियंत्रित करने का एक तरीका है?

— ह्यू गुनी

@ हगगुंडी: हाँ, बिल्कुल। यहाँ ऐसा करने का एक तरीका है, xn--dahlstrm-t4a.net/svg/filb// । बस slopeविशेषताओं को अलग-अलग करने के लिए आपको कितनी अस्पष्टता चाहिए।

— एरिक डाहलस्ट्रम

@ लोरेंजो पेलिगोरी IE10 और सफारी 5.2 दोनों एसवीजी फिल्टर का समर्थन करते हैं।

— एरिक डाहलस्ट्रम

D3.js में इस दृष्टिकोण को लागू करने के तरीके पर उदाहरण: bl.ocks.org/cpbotha/5200394

— mb21

@ कोस्टा देखें उदाहरण के लिए stackoverflow.com/questions/7965196/svg-color-of-the-shadow

— एरिक

Answer 2

नई CSS filterसंपत्ति का उपयोग करें ।

वेबकिट ब्राउज़र , फ़ायरफ़ॉक्स 34+ और एज द्वारा समर्थित है ।

आप इस पॉलीफ़िल का उपयोग कर सकते हैं जो FF <34, IE6 + का समर्थन करेगा।

आप इसका उपयोग इस तरह करेंगे:

/* 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>अकेले तत्व पर रखा जाता है । आप इनलाइन svg तत्व जैसे कि इस पर उपयोग नहीं कर सकते <rect>।

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

Html5rocks पर css फ़िल्टर के बारे में और पढ़ें ।

Comments

यह छवियों के लिए, या पूरे svg के लिए, लेकिन svg के अंदर चयन के लिए काम करता प्रतीत होता है। द

— फिडेल

यह किसी भी तरह से svg तत्वों के लिए ड्रॉप-शैड लगाने के लिए काम नहीं करता है। इसका प्रयोग न करें। असफलता का उदाहरण: jsbin.com/bepurahuwa/1/edit?html,css,js,output

— एंडी रे

@AndyRay एक आकर्षण की तरह काम करता है ... jsbin.com/peviso/edit?html,css,js,output । आपने कक्षा को <svg> टैग पर रखा।

— 18 पर hitautodestruct

@hitautodestruct हाँ, यह उस तरह काम करता है। असली समस्या आता है जब आप भी जरूरत है एक तत्व के लिए फ़िल्टर लागू, लेकिन दूसरों के लिए नहीं।

— जौम

मुझे लगता है कि @AndyRay और hitautodestruct दोनों सही हैं, क्योंकि जैसा कि यहां बताया गया है , यह क्रोम रेंडरिंग मुद्दे की तरह दिखता है: फ़ायरफ़ॉक्स एसवीजी विशिष्ट तत्वों पर फ़िल्टर को सही ढंग से प्रदान कर रहा है।

— ग्रुबर

Answer 3

आप आसानी से ड्रॉप-शैडो () सीएसएस फ़ंक्शन और आरजीबीए रंग मूल्यों का उपयोग करके एक svg-element में एक ड्रॉप-शैडो प्रभाव जोड़ सकते हैं। आरजीबीए रंग मूल्यों का उपयोग करके आप अपनी छाया की अस्पष्टता को बदल सकते हैं।

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

Comments

@ फॉक्सहाउंड यह निश्चित रूप से आधुनिक समाधान है, और इसे उत्तर के रूप में स्वीकार किया जाना चाहिए।

— 10

लेकिन यह एसवीजी के उप-तत्वों के लिए काम नहीं करता है

— मिश्रण 3 डी

इंटरनेट एक्सप्लोरर 11: विफल (कोई ड्रॉप छाया नहीं है लेकिन मूल एसवीजी छवि दिखाई गई है)। फ़ायरफ़ॉक्स (रिलीज़ और ESR): ठीक है। Google Chrome: ठीक है। एज लिगेसी: ठीक है।

— कलिप

बांध, अगर यह केवल समूहों और एसवीजी में आकृतियों पर काम करता है!

— ओग शॉन

Answer 4

सबसे आसान तरीका है जो मैंने पाया है 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>

Comments

मैंने कुछ पठन किया और अब मैं समझता हूं कि आपका उत्तर आपको निश्चित रूप से मिल जाएगा। इस उत्तर की पर्याप्त सराहना नहीं की जाती है। हालांकि, थोड़ा और अधिक स्पष्टीकरण मधुमक्खी अच्छा होगा। उदाहरण के लिए यह उदाहरण: developer.mozilla.org/en-US/docs/Web/SVG/Element/…

— Niklas

तुम बिलकुल ठीक कह रहे हो। धन्यवाद!

— निक नेव

Answer 5

मुझे CSS-only समाधान के बारे में पता नहीं है।

जैसा कि आपने उल्लेख किया है, फिल्टर एसवीजी में ड्रॉप शैडो इफेक्ट बनाने के लिए विहित दृष्टिकोण हैं। एसवीजी विनिर्देश में इसका एक उदाहरण शामिल है।

Comments

-webkit-filter: drop-shadow()सुनिश्चित करने के लिए रास्ता है। @Hitautodestruct द्वारा उत्तर देखें।

— क्लेज़र्मक

@ क्लेज़र्मक 1 यदि आप चाहते हैं कि यह केवल वेबकिट में काम करे .... तो हाँ। हम एक अधिक ठोस समाधान के लिए देख रहे हैं, मेथिंक, और मुझे लगता है कि यह भी अब समर्थित नहीं है।

— dudewad

@ jbeard4 लिंक टूट गया, बेहतर हो सकता है कि यहां सामग्री चिपकाई गई हो।

— इजेवेई

लिंक किए गए लिंक बिंदु Removed: Filter Effects This chapter is no longer part of the SVG specification!!

— एफ। होरी

यह एक गैर जवाब है।

— याय ५

Answer 6

सफेद छाया के साथ काला पाठ

एक और तरीका, मैंने सफेद छाया के लिए इस्तेमाल किया (पाठ पर): छाया के लिए एक क्लोन बनाएं:

नोट : 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>

Comments

यह सिर्फ उपयोग करने के लिए संभव नहीं होगा flood-color?

— रॉबर्ट मोन्फेरा

Blurछाया को थोड़ा धुंधला दिखने के लिए उपयोग किया जाता है। मेरा दूसरा पाठ संस्करण देखें More distant shadow...(अभी जोड़ा गया)

— F. Hauri

Answer 7

संभवतः एक विकास, यह प्रतीत होता है कि इनलाइन सीएसएस फिल्टर एक निश्चित तरीके से, तत्वों पर अच्छी तरह से काम करता है।

एक बूंद-छाया सीएसएस फिल्टर की घोषणा, एक svg तत्व में, एक वर्ग या इनलाइन दोनों में काम नहीं करता है, जैसा कि पहले निर्दिष्ट किया गया था।

लेकिन, कम से कम फ़ायरफ़ॉक्स में, निम्नलिखित विज़ार्ड के साथ:

DOM लोड के बाद javascript के साथ फ़िल्टर घोषणा इनलाइन को लागू करना ।

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