我想为svg的背景着色,text类似于background-colorcss
我只能找到文档fill,为文本本身着色
它甚至可能吗？
是否可以赋予SVG <tspan>元素背景颜色？如果没有,那么模拟它的最佳方法是什么？
我的目标是给出文本背景颜色,并且我认为填充<tspan>元素将是完美的 - 它们已经"概述" <tspan>表示多行文本中的行的文本块(元素).
我正在使用的例子:
<text x="100" y="100" font-size="30">
<tspan>hello</tspan>
<tspan x="100" dy="1.2em">world</tspan>
</text>
我尝试了"填充"属性但它似乎影响文本的填充(颜色),而不是它背后的区域:
<tspan fill="yellow">hello</tspan>
我也试过通过CSS设置背景颜色:
<style type="text/css">tspan { background-color: yellow }</tspan>
..但这不起作用(至少在Chrome 17和Firefox 12中).
用"填充" 包装tspan <g>(或文本本身<g>)也不起作用:
<g fill="yellow"><tspan>hello</tspan></g>
<tspan><g fill="yellow">hello</g></tspan>
除了创建一个<rect>位于同一位置的元素 - 我想避免的东西 - 是否有另一种方法来实现这一目标？
<div style="float: left; padding: 10px; border: 1px solid;
background: #ccc">random text</div>
有没有办法在SVG中实现这样的目标？我的意思是有一个矩形和一个文本和:
a)矩形的宽度和高度是动态的,所以当我更改文本时,矩形调整其大小
b)当我移动矩形时,文本随之变化
并且更容易实现这样的事情<canvas>吗？
编辑:
<defs>
<text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">
THIS IS MY HEADER</text>
</defs>
<filter x="0" y="0" width="1" height="1" id="background">
<feFlood flood-color="gray"/>
<feComposite in="SourceGraphic"/>
</filter>
<use xlink:href="#text1" fill="black" filter="url(#background)"/>
ErikDahlström提出了这样的建议.如何填充背景,如何添加例如.阴影或边框到矩形？并且,这在IE9中不起作用,所以我不能接受它.<foreignObject>如果IE中有支持,我可以使用它.
而我只是想出了我的问题的答案.您必须将两个元素放在组中:
<g>
<rect x="0" y="0" width="100" height="100" fill="red"></rect>
<text x="50" y="50" font-size="14" fill="blue" text-anchor="middle">Hello</text>
</g>
然后你可以使用transformparam 移动组:
<g transform="translate(x, y)">
似乎在每个浏览器中都正常工作.