How can I create a box (rect
?) that resizes itself to fit the the text inside of it using SVG?
<svg> with <rect> and <text> elements inside it used to write text inside the rectangle of SVG. To do that, we need to join the<rect> and <text> elements. Refer the topics Draw Rectangle and Draw Text to get the clear understanding of SVG <rect> and <text> elements.
You create SVG text using the <text> element, which defines a graphic element consisting of text. Because the text is rendered the same way other SVG elements are rendered, you can do the same things to SVG text as you could to an SVG rectangle or circle or line. You can transform SVG text in the coordinate space.
To create text SVG's in Inkscape you need to turn your text into a path. To do this just select your text and then go to “path” in the top menu bar and then choose “object to path”. This will turn your text into a path. From here you can click into each individual letter of your text and edit however you'd like.
Sorry the answer took me so long, but I was learning how to use ECMAScript with an XML DOM.
Alright. So suppose you have your document structure like so:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="800"
height="600"
id="example_text">
<g id="layer1">
<text
x="123.4"
y="567.8"
id="text_holder">
<tspan id="tspan1">Text</tspan>
<tspan id="tspan2">More text</tspan>
</text>
</g>
<script type="text/ecmascript">
function create_from_rect (client_rect, offset_px) {
if (! offset_px) {offset_px=0;}
var box = document.createElementNS(
document.rootElement.namespaceURI,
'rect'
);
if (client_rect) {
box.setAttribute('x', client_rect.left - offset_px);
box.setAttribute('y', client_rect.top - offset_px);
box.setAttribute('width', client_rect.width + offset_px * 2);
box.setAttribute('height', client_rect.height + offset_px * 2);
}
return box;
}
function add_bounding_box (text_id, padding) {
var text_elem = document.getElementById(text_id);
if (text_elem) {
var f = text_elem.getClientRects();
if (f) {
var bbox = create_from_rect(f[0], padding);
bbox.setAttribute(
'style',
'fill: none;'+
'stroke: black;'+
'stroke-width: 0.5px;'
);
text_elem.parentNode.appendChild(bbox);
}
}
}
add_bounding_box('text_holder', 5);
</script>
</svg>
Adding the <script>
tag at the bottom of the root <svg>
element causes it to execute after it's created the DOM structure above it, just like JavaScript on a web page.
Would the following approach make things any simpler?
var text_elem = document.getElementById(text_id);
var bbox = text_elem.getBBox();
and then use bbox's width and height to draw a rect?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With