SVG：为什么外部CSS覆盖文本的内联样式？
SVG：为什么外部CSS覆盖文本的内联样式？
提问于 2018-02-05 04:53:44
我正在玩使用SVG gradientFill作为在d3.js图表中以可视方式“截断”长文本字符串的方式。
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]; });
回答 2
Stack Overflow用户
发布于 2018-02-05 13:33:26
因为在SVG中，就像之前的HTML一样，风格是属性风格。
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>
Stack Overflow用户
发布于 2018-02-05 14:48:08
你可以使用内联样式，而不是表示属性
.attr('style', 'fill : url(#theGradient)')
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004136
复制相关文章
相似问题