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

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

---

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

채우기 태그에 두 개의 값을 추가하려고 시도했지만 (fill = "# 044B94"에서 fill = "# 044B9466"로 변경) 작동하지 않습니다.

---

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

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

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

또한 다음이 있습니다.

• stroke-opacity 획의 속성
• opacity 전체 객체

---

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

다음은 예 입니다.

---

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에서 지원됨)까지이 구문을 지원하지 않았습니다.

---

fill-opacitySVG 요소에서 속성 을 사용하십시오 .

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

내 예를 참조하십시오 .

참고 문헌 .

---

채우기를 완전히 투명하게 만들려면 fill="transparent"최신 브라우저에서 작동하는 것 같습니다. 그러나 Microsoft Word (Mac의 경우)에서는 작동하지 않았으므로을 사용해야했습니다 fill-opacity="0".

참고 URL : https://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha