What is the best way to change TBGRASVG properties (colors, rotation,
text ...)
lazarus / 39-Graphics
----------------------------------------------------------------------
Luc · 2019-07-12 16:30
Hi,
I am starting to use TBGRASVG and would like to find a way to change
some properties of a SVG at runtime.
I could'nt find how to do this using TSVGContent.
Here is a small SVG file (a really simple one so I could directly
change the values with StringReplace on this one, but this would not
work with more complicated SVG).
Quote
Some code examples would be appreciated
----------------------------------------------------------------------
lainz · 2019-07-12 19:06
Using XML units I suppose?
----------------------------------------------------------------------
Luc · 2019-07-13 07:59
Thanks Lainz,
I came up with a solution but I am not sure this is the best way to do
it:
First, I changed this line in the SVG text to add an ID:
Quote
to
Quote
then I use the following code to change the ellipse background color:
Code: Pascal [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TFormResManager.Button1Click(Sender: TObject);var aSVGText: String;
aSVGItem: TSVGElement; function FindElement(aSVGContent:TSVGContent;
Const aName: String): TSVGElement; var i: Integer = 0; aItem:
TSVGElement; //aEl: TSVGEllipse; S: String; begin Result :=
nil; for i := 0 to aSVGContent.ElementCount - 1 do begin
aItem := aSVGContent.Element[i]; if aItem is TSVGGroup
then aItem := FindElement(TSVGGroup(aItem).Content, aName); S :=
aItem.ID; S := aItem.fill; S := aItem.transform; if
SameText(aName, aItem.ID) then begin Result := aItem;
Break; end; end; end; begin aSVGText :=
SVGImage.SVG.AsUTF8String; if aSVGText <> '' then begin
aSVGItem := FindElement(SVGImage.SVG.Content, 'ellipse1'); if
aSVGItem <> nil then begin aSVGItem.fill := '#A92989';
SVGImage.RedrawBitmap; end; end;end;
If someone has an easier or faster solution, he/she is very welcome
----------------------------------------------------------------------
lainz · 2019-07-13 15:25
Nice, I think is the way to go, the same is done in css, using an id
or a class... so is the propper way.
Sorry I don't know too much about that units, because that my answer
was quite generic.
----------------------------------------------------------------------
Luc · 2019-07-13 16:34
This opens up many possibilities for lazarus users.
We now have a very flexible way to design interactive charts or UI.
Is @Circular working on a SVG manipulation library to add specific
effects or animations?
----------------------------------------------------------------------
lainz · 2019-07-13 20:41
Quote from: Luc on July 13, 2019, 06:34:23 pmThis opens up many
possibilities for lazarus users.
We now have a very flexible way to design interactive charts or UI.
Is @Circular working on a SVG manipulation library to add specific
effects or animations?
I don't think so. In what he is working is always visible in the dev
branch of bgrabitmap and lazpaint. Currently in a vector tool (to be
included in lazpaint I think) and lazpaint new version, as always
fixes to bgrabitmap.
But you can ask him if you want to do something like that, as well he
receives patches to the library from people after reviewing them, if
you know how or want to contribute.
And yes, we have some svg controls, an SVG viewer plus SVG Button in
BGRAControls. But again, maybe you find a way to improve them we're
adding user contributions as well, for example the SVG button was
contributed by user Josh in the forum, based on the SVG viewer I
started and circular improved and finished with his great knowlege.
----------------------------------------------------------------------
circular · 2019-07-17 20:20
Hi
I've added TBGRASVG.FindElementById function on the dev branch.
AsUTF8String will never be empty. If you want to check if the SVG is
empty you can check SVG.Content.ElementCount <> 0
I suppose that finding an element could also be done using CSS
definition or functions similar to DOM in Javascript. What would be
most suitable for you?