how to get text node(none element type items)

[zhaoxiangfeng]

hi: i load a svg into a document object,and i want to modify some text node object on runtime,to change the text content or it's styles to show on the screen.how to get text node in a document object? thanks!

[sammycage]

Hi 👋,

Here’s an example that demonstrates how to change the text content and style of an SVG text node:

auto data = R"SVG(
<svg xmlns="http://www.w3.org/2000/svg">
    <text id='a' y='120' font-size='120'>Hello World</text>
</svg>
)SVG";

auto document = Document::loadFromData(data);

auto textElement = document->getElementById("a");
auto textNode = textElement.children().front().toTextNode();
textNode.setData("I love SVG!!!");

document->updateLayout(); 

This will change the text content of the text node with id="a" to “I love SVG!!!”.

Here’s another example for modifying an SVG element's attributes:

auto document = Document::loadFromData("<svg viewBox='0 0 200 200'><circle id='a' cx='50' cy='50' r='40' fill='green'/></svg>");
auto element = document->getElementById("a");
element.setAttribute("cx", "100");
element.setAttribute("cy", "100");
element.setAttribute("r", "100");
element.setAttribute("fill", "red");

document->updateLayout();

Reminder: Don’t forget to call Document::updateLayout after making modifications to reflect the changes on the screen.

Hope this helps!

[zhaoxiangfeng]

Hi 👋,

Here’s an example that demonstrates how to change the text content and style of an SVG text node:

auto data = R"SVG(
<svg xmlns="http://www.w3.org/2000/svg">
    <text id='a' y='120' font-size='120'>Hello World</text>
</svg>
)SVG";

auto document = Document::loadFromData(data);

auto textElement = document->getElementById("a");
auto textNode = textElement.children().front().toTextNode();
textNode.setData("I love SVG!!!");

document->updateLayout(); 

This will change the text content of the text node with id="a" to “I love SVG!!!”.

Here’s another example for modifying an SVG element's attributes:

auto document = Document::loadFromData("<svg viewBox='0 0 200 200'><circle id='a' cx='50' cy='50' r='40' fill='green'/></svg>");
auto element = document->getElementById("a");
element.setAttribute("cx", "100");
element.setAttribute("cy", "100");
element.setAttribute("r", "100");
element.setAttribute("fill", "red");

document->updateLayout();

Reminder: Don’t forget to call Document::updateLayout after making modifications to reflect the changes on the screen.

Hope this helps!

sammycage: hi! thank you for you warmly help,it works perfectly! and thank you for you great work,it manupulate svg file and render it efficiently. i use it to render svg file and write the result to a bitmap,then i put it to a dispaly(screen),i change some of it's attributes and make it looks pretty moving and shining. once again thank you and best regards!

[zhaoxiangfeng]

Hi @sammycage： i want to change the 'class' property to change some graphics's fill color,snippet codes like this: pSVGElement_circle->setAttribute("class", "red-circle"); pSVGElement_rect->setAttribute("class", "blue-rect"); document->updateLayout();

but it is invalid,how can i make it runing right? CSS Styles are defined ok,it's running rightly in browser.

thanks and best regards!

[sammycage]

Hi @zhaoxiangfeng,

Currently, in lunasvg, modifying CSS-related attributes such as class or the content of style elements doesn’t apply the expected styling changes due to how the library is designed. To help with this, I'm considering adding a method like document->applyStyleSheet("rect { fill: red; }");, which would allow you to apply a specified CSS stylesheet directly to the document. This approach could be especially useful for updating the styles of SVG elements in bulk, such as for theme changes.

If this sounds like it would help achieve what you're looking for, please let me know, and I’d be happy to implement it. I'd also be interested to know the purpose or function of lunasvg in your project, if you're open to sharing.

[zhaoxiangfeng]

Hi @zhaoxiangfeng,

If this sounds like it would help achieve what you're looking for, please let me know, and I’d be happy to implement it. I'd also be interested to know the purpose or function of lunasvg in your project, if you're open to sharing.

hi @sammycage: exactly,it's very helpful for me.i'm an electricity engineer,and currentlly i'm leaning c/c++ language and try to develop a application running on a device,the device mornitors electricity objects such as switch/transformer etc.these objects have some states,when they are runing,stoped,something wrong or out of order,they are in diffrent stages,i want to show these stages using graphics on screen,so i define diffrent css styles in svg file,and i switch the css class type to change the graphics appearance. that is my purpose,but i'm not good at software programming,i don't know whether it can be achieved,so your help is really important to me.

thanks and best regards!

[sammycage]

Hi @zhaoxiangfeng,

Thank you for sharing more about your project—it sounds like you're doing some really interesting work!

I've gone ahead and added the applyStyleSheet function, which should help you achieve the dynamic styling you need for displaying the different states of your electrical objects.

Feel free to contact me via email at sammycageagle@gmail.com. I’d be happy to see how I can support you in achieving this.

Best regards!

[zhaoxiangfeng]

Hi @zhaoxiangfeng,

Thank you for sharing more about your project—it sounds like you're doing some really interesting work!

I've gone ahead and added the applyStyleSheet function, which should help you achieve the dynamic styling you need for displaying the different states of your electrical objects.

Feel free to contact me via email at sammycageagle@gmail.com. I’d be happy to see how I can support you in achieving this.

Best regards!

great! yes,you totally understood what i said! expecting your great works!

thank you sincerely!