tspan元素的背景顏色

是否可以給SVG <tspan>元素背景顏色？如果不是，那麼模擬它的最好方法是什麼？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）。這是我想 - 從創建位於同一位置<rect>元素除了

<g fill="yellow"><tspan>hello</tspan></g> 
<tspan><g fill="yellow">hello</g></tspan>

：在<g>

包裝TSPAN（或<g>文本本身）與「補」不工作，要麼避免 - 是否有另一種方法來實現這一目標？

2011-12-30 kangax

一個矩形可能是最好的方法（假設你只是處理最簡單的文本形式）。

在SVG 1.1中，tspans本身沒有「背景」，背景是在tspan之前繪製的任何東西。有許多情況需要考慮，例如tspan在具有圓形形狀的textPath中的情況。另外請注意，這不是在所有情況下，連續矩形作爲簡單的，單一的TSPAN可傾斜，旋轉和劃分成若干交叉和非交叉的形狀由於變換，字形定位等

還有另外一種方式我可以想到沒有腳本就可以做到這一點，但是你需要事先知道字符串的寬度（例如使用等寬字體）。如果你有，那麼你可以使用Ahem字體添加另一個tspan元素，將它放在文檔中的另一個tspan之前，併爲它賦予與你想給出「背景」的tspan相同的x，y位置。

否則，要做到這一點的方法是通過腳本，並添加矩形（或類似Ahem的字體的tspans）。

2011-12-30 14:18:58

謝謝，我會和rect一起去的。我現在可以看到爲什麼指定文本背景可能會有問題。 – kangax 2011-12-31 11:58:00

SVG不支持直接指定圖像背景顏色...但您可以調整viewBox屬性（複雜）的四個值。我知道這是你想避免的，但CSS不會幫助你。

...或者你可以使用getBBox和getCTM ...它會給你旋轉文字的優點。例如： http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg

2011-12-30 10:55:37 Alex

SVG確實允許在根svg元素上使用「背景」，而在SVG Tiny 1.2中也有「視口填充」和「視口不透明度」。但是確實沒有任何東西會自動填充tspan，你必須使用腳本來完成。我不明白爲什麼'viewBox'會適用於此。 – 2011-12-30 12:14:23

@Erik，一般來說，瀏覽器支持Tiny有多強大？ – Alex 2011-12-31 06:32:50

一般？有些部分是支持的，有些則不是:)'viewport-fill'目前還沒有得到廣泛支持（Opera支持它），但還有其他一些事情正在獲得牽引力，比如'矢量效應'和'可重點「，這是在多個瀏覽器引擎中支持的。 – 2012-01-01 01:28:44

回答