수색…
명명 된 색상 - 채우기 및 획 특성에 대해 미리 정의 된 이름 사용
인식 된 색상 키워드 이름 목록은 SVG W3C 권장 사항 에서 찾을 수 있습니다.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle r="30" cx="100" cy="100" fill="red" stroke="green" />
<rect x="200" y="200" width="50" height="50" fill="yellow" stroke="blue" />
</svg>
16 진수 표기법을 사용하는 RGB 색상
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle r="30" cx="100" cy="100" fill="#ff0000" stroke="#00ff00" />
<rect x="200" y="200" width="50" height="50" fill="#ffff00" stroke="#00ffff" />
</svg>
위와 같은 약식 16 진수 형식을 사용 합니다 .
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle r="30" cx="100" cy="100" fill="#f00" stroke="#0f0" />
<rect x="200" y="200" width="50" height="50" fill="#ff0" stroke="#0ff" />
</svg>
기능 표기법이있는 RGB 색상 - 정수 값 또는 백분율
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle r="30" cx="100" cy="100" fill="rgb(255, 0, 0)" stroke="rgb(0, 255, 0)" />
<rect x="200" y="200" width="50" height="50" fill="rgb(100%, 100%, 0%)" stroke="rgb(0%, 100%, 100%)" />
</svg>
기능 표기법에서 RGBA 값도 지원됩니다.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle r="30" cx="100" cy="100" fill="rgba(255, 0, 0, 0.5)" stroke="rgba(0, 255, 0,5 0.5)" />
<rect x="200" y="200" width="50" height="50" fill="rgba(100%, 100%, 0%, 0.5)" stroke="rgba(0, 100%, 100%, 0.5)" />
</svg>
currentColor 키워드
currentColor 는 인라인 SVG에서 가장 유용합니다. 이를 통해 부모 CSS 색상을 상속하고 SVG에서 사용되는 모든 색상을 사용할 수 있습니다.
이 예제에서 첫 번째 원은 텍스트 색상을 채우기 색상으로 사용하고 두 번째 원은 텍스트 색상을 칠 색상으로 사용합니다.
<html>
<head>
div{color:green}
</head>
<body>
<div>
some Text
<svg width="2em" height="1em" viewBox="0 0 200 100">
<circle cx="50" cy="50" r="45" fill="currentColor"/>
<circle cx="150" cy="50" r="45" fill="none" stroke-width=5 stroke="currentColor"/>
</svg>
</div>
</body>
</html>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow