CSS를 사용한 SVG 그림자

379

css3을 사용하여 svg 요소의 그림자를 설정할 수 있습니까?

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

필터 효과를 사용하여 그림자를 만드는 것에 대한 언급이있었습니다. CSS 만 사용하는 예가 있습니까? 아래는 cusor 스타일이 올바르게 적용되지만 그림자 효과가없는 작업 코드입니다. 최소한의 코드로 그림자 효과를 얻을 수 있도록 도와주세요.

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>
스 니펫 확장

html  css  svg  svg-filters 
— bsr
소스

답변:

353

다음 은 'filter'속성을 사용하여 일부 svg에 그림자를 적용 하는 예 입니다. 그림자의 불투명도를 제어하려면 이 예제를 살펴보십시오 . 이 slope속성은 그림자에 얼마나 많은 불투명도를 부여 할 것인지를 제어합니다.

예제의 관련 비트 :

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

Box-shadow는 CSS 박스 (읽기 : 직사각형)에서 작동하도록 정의 된 반면 svg는 직사각형보다 조금 더 표현력이 있습니다. SVG 필터를 사용하여 수행 할 수있는 작업에 대해 자세히 알아 보려면 SVG Primer 를 읽으십시오 .

— 에릭 달 스트롬
소스
1
그림자의 불투명도를 제어하는 ​​방법이 있습니까?
— 휴 기니
5
@HughGuiney : 물론입니다. xn--dahlstrm-t4a.net/svg/filters/… 라는 한 가지 방법의 예가 있습니다. slope원하는 불투명도를 조정 하려면 속성을 변경하십시오 .
— Erik Dahlström
1
@LorenzoPolidori IE10 및 Safari 5.2는 모두 SVG 필터를 지원합니다.
— Erik Dahlström
3
D3.js에서이 접근법을 구현하는 방법에 대한 예 : bl.ocks.org/cpbotha/5200394
— mb21 September
3
— Erik Dahlström
559

새로운 CSS filter속성을 사용하십시오 .

웹킷 브라우저 , Firefox 34 이상 및 Edge에서 지원 합니다.

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>요소에만 배치 된 경우에만 작동합니다 . 와 같은 인라인 svg 요소에서는 이것을 사용할 수 없습니다<rect> .

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

html5rocks의 CSS 필터에 대해 자세히 알아보십시오 .

— 명중
소스
47
이것은 이미지 또는 전체 svg에서 작동하지만 svg 내부의 선택에서는 작동하는 것으로 보입니다. 바이올린
— heneryville
13
어떤 식 으로든 svg 요소에 그림자를 적용하는 데는 작동하지 않습니다. 사용하지 마십시오. 실패의 예 : jsbin.com/bepurahuwa/1/edit?html,css,js,output
— Andy Ray
19
@AndyRay는 매력처럼 작동합니다 ... jsbin.com/peviso/edit?html,css,js,output . <svg> 태그에 클래스를 넣습니다.
— hitautodestruct
3
@hitautodestruct 예, 그렇게 작동합니다. 진짜 당신이 아닌 다른 사람에게 너무 필요한 요소에 필터를 적용 할 때 문제가 온다.
— Joum
3
@AndyRay와 hitautodestruct가 모두 맞다고 생각합니다. 여기 에서 지적한 것처럼 이것은 Chrome 렌더링 문제처럼 보입니다 .Firefox는 SVG 특정 요소에서 필터를 올바르게 렌더링합니다.
— Gruber
71

drop-shadow () CSS 함수 및 rgba 색상 값을 사용하여 svg 요소에 그림자 효과를 쉽게 추가 할 수 있습니다. 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
@Foxhoundn 이것은 확실히 현대적인 해결책이므로 답으로 받아 들여 져야합니다.
— SeedyROM
1
그러나 SVG의 하위 요소에는 적용되지 않습니다.
— mix3d
Internet Explorer 11 : 실패 (그림자는 없지만 원본 SVG 이미지가 표시됨) Firefox (릴리스 및 ESR) : 확인 구글 크롬 : 네. 에지 레거시 : 좋습니다.
— Culip
이것이 SVG의 그룹과 모양에서만 작동한다면 댐!
— OG Sean
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>
— 닉 wong
소스
4
나는 약간의 독서를했고 이제는 당신의 대답을 이해 했으므로 당신은 분명히 그 투표를 얻습니다. 이 답변은 충분히 감사하지 않습니다. 그러나 조금 더 설명하면 좋을 것입니다. 예를 들면 다음과 같습니다. developer.mozilla.org/en-US/docs/Web/SVG/Element/…
— Niklas
당신 말이 맞아요 감사합니다!
— nikk wong
1

CSS 전용 솔루션을 모르겠습니다.

앞에서 언급했듯이 필터는 SVG에서 그림자 효과를 만들기위한 표준 접근 방식입니다. SVG 사양에는 이에 대한 예가 포함되어 있습니다.

— jbeard4
소스
3
-webkit-filter: drop-shadow()확실한 방법입니다. @hitautodestruct의 답변을 참조하십시오.
— clayzermk1
4
@ clayzermk1 웹킷에서만 작동하려면 .... 네. 우리는 더 견고한 솔루션, methink를 찾고 있으며 이것이 더 이상 지원되지 않는다고 생각합니다.
— dudewad
@ jbeard4 링크가 끊어졌으며 여기에 붙여 넣은 내용이 더 좋습니다.
— Ezeewei
1
에 링크 포인트를 제출했습니다 Removed: Filter Effects This chapter is no longer part of the SVG specification!!
— F. Hauri
1
이것은 대답이 아닙니다.
— Yay295
1

흰색 그림자가있는 검은 색 텍스트

다른 방법으로, 나는 텍스트에 흰색 그림자를 사용했습니다 : 그림자에 대한 복제본을 만듭니다.

참고 : xmlns:xlink="http://www.w3.org/1999/xlink"SVG 선언에 필요합니다 .

실제 텍스트 값은 <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>
스 니펫 확장

이 방법을 일반 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>
스 니펫 확장

— F. 하우리
소스
그냥 사용할 수 flood-color없습니까?
— Robert Monfera
Blur그림자를 약간 흐리게 만드는 데 사용됩니다. 두 번째 텍스트 버전보기 More distant shadow...(지금 추가 된 내용)
— F. Hauri
0

아마도 진화 인라인 인 CSS 필터는 요소에서 특정 방식으로 훌륭하게 작동하는 것으로 보입니다.

인라인 클래스 모두에서, SVG 요소에, 드롭 그림자 CSS 필터를 선언하거나하는 것은 수행 하지 앞에서 지정한대로 작동 .

그러나 최소한 다음 마법사를 사용하는 Firefox에서는 다음과 같습니다.

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>
스 니펫 확장

여기에 이미지 설명을 입력하십시오

— NVRM
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.