2013-07-04 16 views
35

पर एक सीएसएस वर्ग कैसे लागू करें ठीक है ... मैं यहां पर पागल हो रहा हूं। मैंने एसवीजी के साथ प्रयोग करना शुरू कर दिया है। एसवीजी के साथ काम करना और सीएसएस कक्षाओं को लागू करना एक आकर्षण की तरह काम करता है। मैं बस यह नहीं समझ सकता कि मैं क्या गलत कर रहा हूं, लेकिन मैं वर्ग को एसवीजी टेक्स्ट तत्व पर काम करने के लिए नहीं प्राप्त कर सकता हूं। मैं यह सब तरह से नीचे छीन लिया गया है और इस मैं क्या मिल गया है:एक एसवीजी पाठ तत्व

<!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 इस काम करना चाहिए के अनुसार

...

क्या बदलने के लिए पर कोई संकेत/सुझाव, या एक विकल्प?

+0

यदि मैं डब्ल्यू 3 लिंक पढ़ता हूं तो आप सीमा निर्धारित करने में सक्षम नहीं हैं। इसे स्ट्रोक कहा जाता है। –

+0

ठीक है, सीमा बस ठीक काम करता है। स्ट्रोक का उपयोग आपके द्वारा वास्तव में "ड्रा" करने के लिए किया जाता है। लेकिन मेरा प्रश्न पाठ तत्व पर कक्षा के बारे में है, जहां मैंने पाठ के रंग को W3 लिंक की तरह सेट किया है। –

उत्तर

52

कक्षा निर्धारित करना सही है लेकिन सीएसएस रंग संपत्ति का एसवीजी पर कोई प्रभाव नहीं पड़ता है। एसवीजी fill और stroke गुणों का उपयोग करता है। आपके मामले में आपको शायद भरने के लिए रंग बदलने की जरूरत है। यह फ़ायरफ़ॉक्स में मेरे लिए पीले पाठ प्रदर्शित करता है।

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

कोशिश की और नहीं ... और याद रखें। रंग वह है जो वे डब्ल्यू 3 सिफारिश पर एक उदाहरण के रूप में देते हैं। मैंने परीक्षण करने के लिए सबसे आसान संभव कार्यान्वयन प्राप्त करने के लिए इसे रंग में फिसल दिया। –

+3

ठीक है आप एसवीजी विनिर्देश में एक बग मिला है। मैंने इसे w3c पर रिपोर्ट किया है: http://lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html –

+0

अच्छा, नहीं। मैं मानता हूं कि एक बग है। लेकिन यह प्रलेखन में नहीं है। वे मूल रूप से बताते हैं कि यह क्या होना चाहिए। ऐसा लगता है कि सभी ब्राउज़र इसे लागू करने में विफल रहे। जो मुझे बहुत ही असंभव रूप से मारता है। और याद रखें, यह या तो भरने या स्ट्रोक के साथ काम नहीं करता है। ऐसा लगता है कि सीएसएस वर्ग चयनकर्ता पूरी तरह से अनदेखा किया जाता है (क्रोम, एफएफ और आईई 10)। –

संबंधित मुद्दे