SVG：基於文本的動態大小，合併對象

<div style="float: left; padding: 10px; border: 1px solid; 
background: #ccc">random text</div>

有沒有在SVG中實現類似的方法的方法？我的意思是有一個矩形和一個文字：SVG：基於文本的動態大小，合併對象

一）矩形的寬度和高度是動態的，所以當我更改文本，矩形調整其大小
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)"/>

埃裏克·達爾斯特羅姆提出了這樣的事情。如何將填充放到背景中，如何添加例如。陰影或邊界到矩形？而且，這在IE9中不起作用，所以我不能接受它。如果在IE中支持它，我可以使用<foreignObject>。

而我只是想出了答案b）我的問題點。你必須把兩個元素組中：

<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>

然後你就可以使用移動PARAM transform組：

<g transform="translate(x, y)">

似乎在每一個瀏覽器工作正確。

來源

2012-12-13 geehertush01

IE9不支持過濾器或foreignObject。 IE10支持過濾器，但不支持foreignObject（AFAIK）。 –

您可以使用JavaScript來調整框：

<svg xmlns="http:/www.w3.org/2000/svg" onload="init()" height="100" width="200"> 
 
     <style type="text/css"> 
 
     rect { 
 
      stroke:black; 
 
      stroke-width:1; 
 
      fill:#ccc; 
 
     } 
 
     </style> 
 
     <script type="text/javascript"> 
 
     var text, rect 
 
     var padding = 10 
 
     function init() { 
 
      text = document.getElementsByTagName("text")[0] 
 
      rect = document.getElementsByTagName("rect")[0] 
 
      adjustRect() 
 
     } 
 
     
 
     function adjustRect() { 
 
      var bbox = text.getBBox() 
 
      rect.setAttribute("x",bbox.x - padding) 
 
      rect.setAttribute("y",bbox.y - padding) 
 
      rect.setAttribute("width",bbox.width + 2*padding) 
 
      rect.setAttribute("height",bbox.height + 2*padding) 
 
     } 
 
     
 
     </script> 
 
     <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> 
 
    </svg> 
 
    <div> 
 
     <button onclick="text.textContent='Goodbye';adjustRect()">change text</button> 
 
    </div>

來源

2012-12-14 06:14:45

使用svg過濾器繪製背景，以適應文本的大小和位置。完整的示例請參閱this answer。

來源

2012-12-13 15:05:28

我編輯了我的問題。 – geehertush01

SVG：基於文本的動態大小，合併對象

回答

相關問題