Programmatically changing mixed-text layout content

[aaronpowell]

Is it possible to change any of the text values of a mixed-text layout component? Let's say I have a header and copy, and I want to programmatically update the copy's "to" value.

[cblunt]

Hi,

I was looking into this and couldn't find any documentation on setting their values. The "mixed text" element appears to nest two text elements, identified as #header and #copy. To set their text values programatically, you can use #getElementById() in your JS to get a reference to these elements, e.g:

// index.js
let mixedText = document.getElementById('myMixedText');

let headerLabel = mixedText.getElementById('header');
let copyLabel = mixedText.getElementById('copy');

// Set the text attribute values  
headerLabel.text = "Your Header";
copyLabel.text = "Your text here";

# index.svg
<use href="#mixed-text-center-mid" height="100%" fill="fb-yellow" id="myMixedText">
  <set href="#header/text" attributeName="text-buffer" to="Title"/>
  <set href="#copy/text" attributeName="text-buffer" to="Label"/>
</use>

Hope this helps!

[cozzbox]

Hi cblunt,

Your advice has become very useful for me. Thank you. But there is still a problem. Changing the text of element "copy" by programming will result in an error ("Too big string"). And it disappears in the middle of the text on display. Do you know this solution?

Thank you.

[cblunt · Accepted solution]

Hi @cozzbox

This sounds like it's the text-length attribute in SVG. I thought you might be able to set this in the CSS, but I couldn't get it to select the correct element. Instead what I found is that you can set the attributes using the SVG <use /> element as below (I guess you could also do it in Javascript, but haven't tried it to confirm):

<!-- index.svg -->
<svg class="background">
  <use href="#mixed-text-left-top" height="100%" id="myMixedText">
    <set href="#header/text" attributeName="text-buffer" to="Title" />
    <set href="#copy/text" attributeName="text-buffer" to="Label"/>

    <!-- Additional properties -->
    <set href="#header/text" attributeName="text-length" to="128" />
    <set href="#header/text" attributeName="fill" to="fb-blue" />
    ...etc...
  </use>
</svg>

By increasing the text-length property, you should be able to print out the string you need.

[cozzbox]

Hi @cblunt

Thank you very much for good advice.

You made me very happy!

[joelbalmer]

For anyone else interested or coming across a similar problem, I received the same error when trying to set button text programmatically from 'connect' (length 7) to 'connecting' (13). I was able to solve using @cblunt 's method, like so:

<svg y="200" width="90%" height="100">
  <use id="connectBtn" href="#square-button" x="5%" fill="fb-green">
    <set href="#text" attributeName="text-buffer" to="Connect" />
    <set href="#text" attributeName="text-length" to="13" />
  </use>
</svg>

Hope that's useful to someone else!