SVG 채우기 색상 투명도 / 알파?

416

SVG 채우기 색상에서 투명도 또는 알파 수준을 설정할 수 있습니까?

나는 (에서 변경 채우기 태그에 두 개의 값을 추가하려고했습니다 fill="#044B94"에 fill="#044B9466"),하지만이 일을하지 않습니다.

colors  svg  transparency  alpha  fill 
— 올리 유리
소스
관심있는 사람들을위한, 빈 필 이상의 클릭을받을 : 참조 ": 없음 채우기"SVG는 이벤트를 온 클릭 감지 - 즉 사용 할 수있는 가능성 fill="none"과 함께 pointer-events="visible".
— Fabien Snauwaert

답변:

645

추가 속성을 사용합니다. fill-opacity:이 속성은 0.0에서 1.0 사이의 10 진수를 사용합니다. 0.0은 완전히 투명합니다.

예를 들면 다음과 같습니다.

<rect ... fill="#044B94" fill-opacity="0.4"/>

또한 다음이 있습니다.

  • stroke-opacity 획의 속성
  • opacity 전체 객체
— 윌리엄 토틀 랜드
소스
3
— t-mart
4
스타일 속성에이를 넣을 수도 있습니다 : <rect style = "fill : # 044B94; fill-opacity : 0.4;" />
— PeterVermont
위의 "fill-opacity"및 "stroke-opacity"는 "fill_opacity"및 "stroke_opacity"로 바꾸어야합니다 (즉, 하이픈을 밑줄로 바꿉니다).
— mermaldad
1
@mermaldad 틀렸다; 사양을 참조하십시오 . 이름에 하이픈을 포함 할 수없는 일부 언어의 경우 SVG 작업을위한 라이브러리는와 같은 이름을 사용 fill_opacity하지만 SVG 및 CSS의 경우 이름은 fill-opacity입니다.
— Williham Totland
@WillihamTotland, 수정 주셔서 감사합니다. 나는 "Python에서 svgwrite를 사용하여 이것을 어떻게 구현합니까?" 하이픈을 밑줄로 바꿔야합니다.
— mermaldad
78

아직 완전히 표준화되지 않은 솔루션으로 (CSS3의 색상 구문과 일치하지만) eg를 사용할 수 있습니다 fill="rgba(124,240,10,0.5)". Firefox, Opera, Chrome에서 잘 작동합니다.

다음은 예 입니다.

— 에릭 달 스트롬
소스
3
w3.org/TR/SVG/painting.html#FillProperties를 살펴 보십시오 (채우기 불투명도를 위해 약간 아래로 스크롤). 그것은 나에게 완전히 표준화 된 것처럼 보입니다.
— Williham Totland
10
@williham : yes fill-opacity는 SVG 권장 사항에 있으며이를 사용하는 데 아무런 문제가 없습니다. CSS3 구문은 CSS3 색상으로되어 있으며, 이는 w3c 권장 사항이되는 한 걸음입니다. SVG 1.1은 당시에 사용할 수 없었기 때문에 CSS3 색상을 참조하지 않습니다. 향후 SVG 버전은 아마도 가능할 것입니다.
— Erik Dahlström
7
이것이 효과가없는 것 같은 곳은 Inkscape에 있습니다
— George Mauer
2
이 솔루션을 Highcharts에서 사용했으며 효과가있었습니다. 속성 으로 변환 rgba하여 rgb자동으로 fill-opacity속성을 추가 했습니다. 이것이 이것이 정상적인 SVG에서도 작동하는지 확실하지 않지만 그것이 작동하는 방식입니다. 어느 쪽이든 감사합니다.
— Hanna
3
인라인 svgs에서 실제로 어떤 브라우저가 rgba를 지원하는지 명확하게 알 수 있습니까?
— redanimalwar
6 
fill="#044B9466"

이것은 16 진 값으로 정의 된 SVG 내의 16 진 표기법 의 RGBA 색상 입니다. 이것은 유효하지만 모든 프로그램이 올바르게 표시하지는 않습니다 ...

이 구문에 대한 브라우저 지원은 https://caniuse.com/#feat=css-rrggbbaa 에서 찾을 수 있습니다.

2017 년 8 월 현재 : Mozilla Firefox (54), Apple Safari (10.1) 및 Mac OS X Finder의 "Quick View"에 RGBA 채우기 색상이 올바르게 표시됩니다. 그러나 Chrome은 버전 62 (이전에는 실험 플랫폼 기능 플래그가 활성화 된 버전 54에서 지원됨)까지이 구문을 지원하지 않았습니다.

— 미스터 IDE
소스
그들이 최근에 무언가를 바꾸 었는지 알고 있습니까? fill : rgb (...)을 사용하는 작동중인 크롬 응용 프로그램이 있었고 이제는 완전히 고장났습니다. 당신의 도움을 절실히 요구합니다!
— Mariodiar
Qt SVG 라이브러리 (Qt 5.9.3)는 "# 00000000"16 진수 형식이나 "rgba"까지 RGBA 색상을 처리 할 수 ​​없습니다.
— bkausbk
1

속성 사용 fill-opacitySVG의 요소에 을 .

기본값은 1이고, 최소값은 0이며, 단계적으로 10 진수 값을 사용하십시오. EX : 0.5 = 50 %의 알파. 참고 : fill적용 할 색상을 정의 해야합니다.fill-opacity .

내 예를 참조하십시오 .

참고 문헌 .

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