CSS 클래스를 SVG Text 요소에 적용하는 방법

좋아요 ... 여기에 이상이 있습니다. 나는 SVG를 실험하기 시작했다. SVG로 작업하고 CSS 클래스를 적용하면 매력처럼 작동합니다. 나는 내가 뭘 잘못하고 있는지 파악할 수는 없지만 클래스를 svg 텍스트 요소로 작업 할 수는 없다. 나는 모든 방법을 아래로 박탈 한이 내가 무엇을 가지고 있습니다 :CSS 클래스를 SVG Text 요소에 적용하는 방법

이 작동합니다 http://www.w3.org/TR/SVG/styling.html#ClassAttribute에 따르면

<!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>

...

변경하는 것에 대한 어떤 힌트/팁, 또는 대안?

출처

2013-07-04 Bastiaan Linders

내가 w3 링크를 읽으면 국경을 설정할 수 없습니다. 뇌졸중이라고합니다. –

글쎄, 국경 잘 작동합니다. 스트로크는 실제로 "그리는"모든 것에 사용됩니다. 하지만 내 질문은 텍스트 요소의 클래스에 대한 것인데, 여기서 텍스트의 색을 w3 링크처럼 설정합니다. –

클래스 설정은 정확하지만 CSS 색상 속성은 SVG에 영향을주지 않습니다. SVG는 fill 및 stroke 속성을 사용합니다. 귀하의 경우에는 채우기 위해 색을 바꿀 필요가있을 것입니다. 이것은 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>

출처

2013-07-04 10:05:36

시도해 보아라. 그리고 .. 그리고 기억해라. 색상은 W3 권장 사항에서 예제로 제공 한 것입니다. 테스트 할 수있는 가장 쉬운 구현을 얻기 위해 색상을 제거했습니다. –

SVG 사양에서 버그를 발견했습니다. 나는 그것을 w3c에보고했다 : http://lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html –

글쎄, 아니. 나는 버그가 있음에 동의한다. 그러나 문서에 나와 있지 않습니다. 그들은 기본적으로 그것이 무엇을 해야하는지 설명합니다. 모든 브라우저가이를 구현하지 못한 것 같습니다. 나는 그다지 희박하지 못하다. 그리고 필이나 스트로크도 작동하지 않는다는 것을 기억하십시오. CSS 클래스 선택기가 완전히 무시 된 것 같습니다 (chrome, FF 및 IE10). –

CSS 클래스를 SVG Text 요소에 적용하는 방법

답변

관련 문제