SVG:基于文本的动态大小,合并对象 [英] SVG: dynamic size based on text, merging objects
问题描述
有没有办法在 SVG 中实现这样的目标?我的意思是有一个矩形和一个文本和:
a) 矩形的宽度和高度是动态的,因此当我更改文本时,矩形会调整其大小
b) 当我移动矩形时,文本随之移动
在
中实现这样的东西会更容易吗?
<text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">这是我的标题</text></defs><filter x="0" y="0" width="1" height="1" id="background"><feFlood flood-color="gray"/><feComposite in="SourceGraphic"/></过滤器><使用 xlink:href="#text1" fill="black" filter="url(#background)"/>
Erik Dahlström 提出了这样的建议.如何将填充放在背景中,如何添加例如.矩形的阴影或边框?而且,这在 IE9 中不起作用,所以我不能接受.如果 IE 支持 <foreignObject>
,我就可以使用它.
我刚刚找到了我的问题 b) 的答案.您必须将两个元素放入组中:
<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">你好</text>
然后你可以使用 transform
参数移动组:
似乎在每个浏览器中都能正常工作.
解决方案 可以使用 JavaScript 来调整框:
<svg xmlns="http://www.w3.org/2000/svg" onload="init()" height="100" 宽度="200"><style type="text/css">矩形{笔画:黑色;笔画宽度:1;填写:#ccc;}</风格><script type="text/javascript">var 文本,矩形无功填充 = 10函数初始化(){text = document.getElementsByTagName("text")[0]rect = document.getElementsByTagName("rect")[0]调整矩形()}函数调整矩形(){var bbox = text.getBBox()rect.setAttribute("x",bbox.x - 填充)rect.setAttribute("y",bbox.y - 填充)rect.setAttribute("width",bbox.width + 2*padding)rect.setAttribute("height",bbox.height + 2*padding)}<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">你好</text></svg><div><button onclick="text.textContent='Goodbye';adjustRect()">更改文本</button>
<div style="float: left; padding: 10px; border: 1px solid;
background: #ccc">random text</div>
Is there a way to achieve something like this in SVG? I mean to have a rectangle and a text and:
a) rectangle's width and height are dynamic, so when I change the text, the rectangle adjust its size
b) when I move the rectangle, the text goes with it
And would it be easier to achieve something like this in <canvas>
?
EDIT:
<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)"/>
Erik Dahlström proposed something like this. How to put padding to the background, how to add eg. shadow or border to the rectangle? And, this doesn't work in IE9, so I cannot accept it. I could just use <foreignObject>
if there was a support for it in IE.
And I just figured out the answer for b) point of my question. You have to put both elements in the group:
<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>
And then you can move the group using transform
param:
<g transform="translate(x, y)">
Seems to work correct in every browser.
解决方案 You can use JavaScript to adjust the box:
<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>
这篇关于SVG:基于文本的动态大小,合并对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!