SVG: tại sao css bên ngoài ghi đè kiểu nội dòng cho văn bản?

Question

Tôi đang phát bằng cách sử dụng gradient SVG làm cách để trực quan 'cắt ngắn' chuỗi văn bản dài trong biểu đồ d3.js.

Dường như một kiểu css bên ngoài để lấp đầy sẽ ghi đè kiểu tô màu tô trong dòng trong SVG ... luôn luôn như vậy? Làm thế nào tôi có thể thực thi tô màu gradient đó?

Trong trường hợp thử nghiệm này, tôi đã xác định một dốc tuyến tính trong các số svg defs, và sau đó áp dụng tô màu gradient cho hai nhóm văn bản. 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]; }); 

sau đó trong CSS, tôi xác định một điền cho .group2 văn bản

.group2 text { 
    fill: #000; 
} 

nhóm đầu tiên có các điền gradient, nhóm thứ hai thì không.

Không nên kiểu nội tuyến được ưu tiên?

Cảm ơn!

Answer 1

Bởi vì trong SVG, như HTML trước đó, kiểu dáng kiểu dáng thuộc tính.

fill="red" dưới đây là KHÔNG một "inline style", style="fill:green"LÀ một phong cách nội tuyến.

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

Giống như khôn ngoan, nếu bạn có một phong cách được định nghĩa bên ngoài, nó sẽ giành chiến thắng.

<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

Từ SVG specification

Đối với đại lý người dùng có hỗ trợ CSS, các thuộc tính trình bày phải được dịch tương ứng quy tắc phong cách CSS theo các quy tắc mô tả trong Precedence của phi CSS gợi ý giới thiệu ([CSS2], phần 6.4.4), với việc làm rõ thêm rằng các thuộc tính bản trình bày được chèn vào một bản định kiểu tác giả mới, đây là lần đầu tiên trong phong cách tác giả, et bộ sưu tập. Các thuộc tính trình bày như vậy sẽ tham gia vào chuỗi CSS2 như thể chúng đã được thay thế bằng các quy tắc kiểu CSS tương ứng được đặt ở đầu bảng định kiểu tác giả với độ đặc trưng là 0. Nói chung, điều này có nghĩa là thuộc tính bản trình bày có mức độ ưu tiên thấp hơn so với các quy tắc kiểu CSS khác được chỉ định trong các biểu định kiểu tác giả hoặc thuộc tính ‘kiểu’.

Vì vậy, bạn có thể sử dụng kiểu nội tuyến thay vì thuộc tính bản trình bày, ví dụ:

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

Answer 3

Trong trường hợp của tôi nó là đơn giản như thay thế attr với style trong chuỗi d3:

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