반응형
SVG 텍스트 요소에 색상을 적용하는 방법
좋아 .. 난 여기서 미쳐 버릴거야. 저는 SVG 실험을 시작했습니다. SVG로 작업하고 CSS 클래스를 적용하는 것은 매력처럼 작동합니다. 내가 뭘 잘못하고 있는지 알아낼 수는 없지만 svg 텍스트 요소에서 클래스가 작동하도록 할 수는 없습니다. 나는 그것을 끝까지 벗 겼고 이것이 내가 얻은 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Playground</title>
</head>
<body>
<style type="text/css">
.mainsvg {
height: 320px;
border: 1px solid red;
width: 400px;
}
.caption {
color: yellow;
}
</style>
<h2>SVG - Sandbox</h2>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
<text x="65" y="40" class="caption">Fact</text>
</svg>
</div>
</body>
</html>
http://www.w3.org/TR/SVG/styling.html#ClassAttribute 에 따르면 이것은 작동합니다 ...
무엇을 변경해야하는지 또는 대안에 대한 힌트 / 팁이 있습니까?
클래스 설정은 정확하지만 CSS 색상 속성은 SVG에 영향을주지 않습니다. SVG는 채우기 및 획 속성을 사용 합니다. 귀하의 경우에는 채우기 위해 색상을 변경해야 할 수도 있습니다. 이것은 Firefox에서 나를 위해 노란색 텍스트를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Playground</title>
</head>
<body>
<style type="text/css">
.mainsvg {
height: 320px;
border: 1px solid red;
width: 400px;
}
.caption {
fill: yellow;
}
</style>
<h2>SVG - Sandbox</h2>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
<text x="65" y="40" class="caption">Fact</text>
</svg>
</div>
</body>
</html>
참고URL : https://stackoverflow.com/questions/17466707/how-to-apply-a-color-to-a-svg-text-element
반응형
'IT TIP' 카테고리의 다른 글
| Maven 버전 관리 모범 사례 (0) | 2020.12.01 |
|---|---|
| 다른 디렉터리의 테스트가 동일하게 호출 될 때 테스트 검색 실패 (0) | 2020.12.01 |
| Kafka : 소비자 API 대 Streams API (0) | 2020.12.01 |
| 기능적 언어로서의 자바 스크립트 (0) | 2020.12.01 |
| .Net의 Int128? (0) | 2020.12.01 |