Jump to content
Sign in to follow this  
Sakis

SVG position

Recommended Posts

Hello

First of all sorry for my bad English.

I have assigned an SVG in a BitButton using

W3BitBtn1.InnerHTML:='<img src="res/anchor.svg"   width="30px" height="30px" >';

I want to ask how do I change the position of the SVG?

My button has a quarter circle shape and I need to position the SVG so it will appear in the center of the quarter circle.

 

Thank you in advance 

 

Share this post


Link to post
Share on other sites

1) This is the code for the quarter shape

procedure TForm1.InitializeObject;
begin
  inherited;

  {$I 'Form1:impl'}

 w3_setstyle(W3BitBtn1.handle,'height','64px');
 w3_setstyle(W3BitBtn1.handle,'width','64px');
 w3_setstyle(W3BitBtn1.handle,'border-radius','0 0 90px 0');
 w3_setstyle(W3BitBtn1.handle,'background','orange');
 W3BitBtn1.InnerHTML:='<img src="res/anchor.svg"  width="30px" height="30px" >';

end;

2) I couldn't find an example how to use Glyph and thought that using Layout to position an image inside a button is not a good idea.

Share this post


Link to post
Share on other sites

The BitBtn has a image and label. You are able to manipulate the image around the label by either positioning it (left, right, top, or bottom)

You use the Glyph's Url property to load the image and the layout property to position it.

 

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  W3BitBtn1.Glyph.Url:= 'res\blank.png';
  W3BitBtn1.Layout:=   glGlyphLeft; //glGlyphRight, glGlyphTop, glGlyphBottom
end;

 

Is this what you are looking for in a control?  Or do you just want a button with an image?

 W3button1:= TW3Button.Create(Self);
  W3button1.SetBounds(10,10,32,32);
  W3Button1.handle.style.setProperty('background-image', 'url("res/blank.png")');
  W3Button1.handle.style.setProperty('background-repeat', 'no-repeat');
  W3Button1.handle.style.setProperty('background-position', 'center');

 

 

Share this post


Link to post
Share on other sites

No it is not.

I need to place the image, inside the button, in positions relative to the center and the dimension of the button.

Both of them change when the screen resizes and if the shape of the button is not a rectangle the actual center is also different.

I thought something like the code below would work but it doesn't

W3BitBtn1.InnerHTML:='<img src="res/anchor.svg" "position=fixed" top="1px" left="1px"  width="30px" height="30px" >';

 

Share this post


Link to post
Share on other sites

So then this will work


  W3Button1.handle.style.setProperty('background-image', 'url("res/blank.png")');
  W3Button1.handle.style.setProperty('background-repeat', 'no-repeat');
  W3Button1.handle.style.setProperty('background-size', '100%');

 

Assuming you are resizing your button first

e.g.

procedure TForm1.Resize;
begin
  inherited;
  W3button1.SetBounds();
end;

Share this post


Link to post
Share on other sites

Thank you for your help!

One more question.

What if I want to set the image origin say 10px from left and 12px from the top. How can I do that? 

I have a parametric CAD background where absolute dimensions rule :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×