本文介绍了SVG:为什么外部 css 会覆盖文本的内联样式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 SVG 渐变填充作为一种在 d3.js 图表中直观地截断"长文本字符串的方法.

I'm playing with using an SVG gradientFill as a way to visually 'truncate' long text strings in a d3.js chart.

似乎用于填充的外部 css 样式将覆盖 SVG 中的内联渐变填充样式……情况总是如此吗?如何强制执行渐变填充?

It seems that an external css style for fill will override the inline gradient fill style in the SVG... is that always the case? How can I enforce that gradient fill?

在这个测试用例中,我在 svg defs 中定义了一个线性渐变,然后将渐变填充应用于两组文本.http://jsfiddle.net/rolfsf/uX2kH/3/

In this test case I've defined a linear gradient in the svg defs, and then apply the gradient fill to two groups of text. 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 文本定义了一个填充

then in CSS, I define a fill for .group2 text

.group2 text {
    fill: #000;
}

第一组有渐变填充,第二组没有.

the first group has the gradient fill, the second group does not.

内联样式不应该优先吗?

谢谢!

推荐答案

因为在 SVG 中,就像之前的 HTML 一样,样式胜过属性样式.

Because in SVG, like HTML before it, styles trump attribute styling.

fill=red" 下面是不是内联样式",style=fill:green" 一种内联样式.

fill="red" below is NOT an "inline style", style="fill:green" IS an inline style.

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

同样,如果你在外面定义了一种风格,它就会获胜.

Like wise, if you have a style defined outside, it will win.

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

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

这篇关于SVG:为什么外部 css 会覆盖文本的内联样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 03:53
查看更多