SVG:为什么外部css覆盖文本的内联样式？
SVG:为什么外部css覆盖文本的内联样式？
提问于 2014-06-19 03:47:17
我正在尝试使用SVG gradientFill来可视化地“截断”d3.js图表中的长文本字符串。
似乎填充的外部css样式将覆盖SVG中的内联渐变填充样式...一直都是这样吗？如何强制渐变填充？
在此测试用例中，我在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]; });然后在CSS中，我定义了.group2文本的填充
.group2 text {
fill: #000;
}第一组有渐变填充，第二组没有。
不应该优先使用内联样式吗？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-06-19 04:14:21
因为在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>
就像wise一样，如果你在外部定义了一个风格，它就会赢。
<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用户
发布于 2014-06-19 05:03:23
对于支持CSS的用户代理，必须根据在非CSS表示提示的优先级(CSS2，第6.4.4节)中描述的规则，将表示属性转换为相应的CSS样式规则，并进一步澄清表示属性在概念上插入到新的作者样式表中，该新作者样式表是作者样式表集合中的第一个。因此，表示属性将参与CSS2级联，就好像它们被放置在author样式表开头的具有0的特异性的相应样式规则所替换一样。一般而言，这意味着与在author样式表或‘’属性中指定的其它样式规则相比，CSS属性具有较低的优先级样式。
因此，您可以使用内联样式而不是表示属性，例如
.attr('style', 'fill : url(#theGradient)')Stack Overflow用户
发布于 2017-11-22 18:23:15
在我的例子中，它和在d3链中用style替换attr一样简单：
.style('stroke', 'url(#gradient--min)')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24293880
复制相关文章
相似问题
腾讯云开发者
