एसवीजी: बाहरी सीएसएस टेक्स्ट के लिए इनलाइन शैली को ओवरराइड क्यों करता है?

Question

मैं एक एसवीजी ढाल का उपयोग करने के साथ खेल रहा हूं, एक d3.js चार्ट में दृष्टि से 'छंटनी' लंबे टेक्स्ट स्ट्रिंग्स के रूप में भरें।

ऐसा लगता है कि भरने के लिए बाहरी सीएसएस शैली एसवीजी में इनलाइन ग्रेडियेंट भरने की शैली को ओवरराइड कर देगी ... क्या यह हमेशा मामला है? मैं उस ढाल भरने को कैसे लागू कर सकता हूं?

इस परीक्षण मामले में मैंने svg defs में एक रैखिक ढाल परिभाषित किया है, और फिर ग्रेडियेंट को टेक्स्ट के दो समूहों में भरें। http://jsfiddle.net/rolfsf/uX2kH/3/

var labelColWidth = 200; 
var svg = d3.select('#test').append('svg') 
      .attr('width', 500) 
      .attr('height', 500); 

var defs = svg.append('svg:defs'); 

var textgradient = defs.append('svg:linearGradient') 
      .attr('gradientUnits', 'userSpaceOnUse') 
      .attr('x1', 0).attr('y1', 0).attr('x2', 40).attr('y2', 0) 
      .attr('id', 'theGradient') 
      .attr('gradientTransform', 'translate(' + (labelColWidth - 40) + ')'); 

    textgradient.append('svg:stop').attr('offset', '0%').attr('style', 'stop-color:rgb(0,0,0);stop-opacity:1') 
    textgradient.append('svg:stop').attr('offset', '100%').attr('style', 'stop-color:rgb(0,0,0);stop-opacity:0'); 


var data = [[0, "xyzzy xyzzy"], [1, "xyzzy xyzzy xyzzy xyzzy xyzzy"], [2, "xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy"], [3, "xyzzy xyzzy xyzzy"], [4, "xyzzy xyzzy"], [5, "xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy"]]; 

var testGroup = svg.append('g') 
    .attr('transform', 'translate(50, 100)'); 

var testGroup2 = svg.append('g') 
    .attr('transform', 'translate(50, 250)') 
    .attr('class', 'group2'); 

testGroup.selectAll('text').data(data) 
    .enter().append('svg:text') 
    .attr('fill', 'url(#theGradient)') 
    .attr('x', 0) 
    .attr('y', function(d, i) { return (i+1) * 20; }) 
    .text(function(d, i) { return d[1]; }); 

testGroup2.selectAll('text').data(data) 
    .enter().append('svg:text') 
    .attr('fill', 'url(#theGradient)') 
    .attr('x', 0) 
    .attr('y', function(d, i) { return (i+1) * 20; }) 
    .text(function(d, i) { return d[1]; }); 

तो सीएसएस में, मैं एक भरने .group2 पाठ

.group2 text { 
    fill: #000; 
} 

पहले समूह ढाल भरने है के लिए परिभाषित करते हैं, दूसरे समूह नहीं है।

इनलाइन शैली को प्राथमिकता नहीं लेनी चाहिए?

धन्यवाद!

Answer 1

क्योंकि एसवीजी में, इससे पहले एचटीएमएल की तरह, स्टाइल ट्रम्प विशेषता स्टाइल।

fill="red" नीचे नहीं एक "इनलाइन शैली" है, style="fill:green" एक इनलाइन शैली है।

<svg width="400" height="400"> 
 
    <text x="50" y="50" fill="red" style="fill:green">This will be green</text> 
 
</svg>

बुद्धिमान की तरह, अगर आप एक शैली के बाहर परिभाषित किया गया है, यह जीत जाएगा।

<style> 
 
    text { fill: lime; } 
 
</style>

<svg width="300" height="300"> 
 
    <text x="50" y="40" fill="red">This will be lime</text> 
 
</svg>

Answer 2

SVG specification

उपयोगकर्ता एजेंटों कि सीएसएस समर्थन के लिए से, प्रस्तुति गुण इसी गैर सीएसएस के पूर्वता में वर्णित नियमों के अनुसार सीएसएस शैली नियमों में अनुवाद किया जाना चाहिए प्रस्तुतिकरण संकेत ([सीएसएस 2], खंड 6.4.4), अतिरिक्त स्पष्टीकरण के साथ कि प्रस्तुति विशेषताओं को अवधारणात्मक रूप से एक नई लेखक स्टाइल शीट में डाला जाता है जो लेखक शैली में पहला है et संग्रह। प्रेजेंटेशन विशेषताएँ इस प्रकार सीएसएस 2 कैस्केड में भाग लेंगी जैसे कि उन्हें शून्य की विशिष्टता के साथ लेखक स्टाइल शीट की शुरुआत में रखे गए संबंधित सीएसएस स्टाइल नियमों द्वारा प्रतिस्थापित किया गया था। आम तौर पर, इसका मतलब है कि प्रस्तुति विशेषताओं में लेखक शैली स्टाइल या 'शैली' विशेषताओं में निर्दिष्ट अन्य सीएसएस शैली नियमों की तुलना में कम प्राथमिकता है।

तो आप एक प्रस्तुति विशेषता के बजाय इनलाइन शैली का उपयोग कर सकते हैं उदा।

.attr('style', 'fill : url(#theGradient)') 

Answer 3

मेरे मामले में यह d3 श्रृंखला में style साथ attr की जगह के रूप में सरल था:

.style('stroke', 'url(#gradient--min)')