Jump to content

Recommended Posts

  • Moderators

SVG - Scalable Vector Graphics sort of has not been in my viewport, but it does have amazing properties

 

Have a look at https://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/ for some very funny ui examples

 

SVG's can be embedded in the page html, but more importantly can be scripted as well

unit Form1;
 
interface
 
uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application,
  SmartCL.Controls.Elements, SmartCL.Controls.Memo, SmartCL.Controls.Button,
  W3C.HTML5;
 
type
  TForm1 = class(TW3Form)
    procedure W3Button1Click(Sender: TObject);
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
    MyDiv : TW3DIVHtmlElement;
  end;
 
implementation
 
{ TForm1 }
 
procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;
 
procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
 
// create SVG element
  var SVGElement := Document.createElement('svg');
  SVGElement.setAttribute('version', '1.1');
  SVGElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
 
// create SVG rect element
  var SVGrect := document.createElement('rect');
  SVGrect.id := 'rect1';
  SVGrect.setAttribute('x', '10');
  SVGrect.setAttribute('y', '10');
  SVGrect.setAttribute('width', '50');
  SVGrect.setAttribute('height', '80');
  SVGrect.setAttribute('fill', 'white');
  SVGElement.appendChild(SVGrect);
 
  var tmp := document.createElement("div");
  tmp.appendChild(SVGElement);
 
  MyDiv := TW3DIVHtmlElement.Create(self);
  MyDiv.SetBounds(20,20,200,110);
 
  MyDiv.InnerHTML := tmp.innerHTML;
 
end;
 
procedure TForm1.W3Button1Click(Sender: TObject);
begin
  if browserapi.document.getElementById("rect1").getAttribute("width") = "50"
  then browserapi.document.getElementById("rect1").setAttribute("width", "100")
  else browserapi.document.getElementById("rect1").setAttribute("width", "50");
 
  browserapi.document.getElementById("rect1").style.stroke := "#ff0000";
  browserapi.document.getElementById("rect1").style['stroke-width'] := 4;
 
end;


 
.
The above code works well
 
Also there are 2 W3C-api's included in SMS (W3C.SVGTiny and W3C.SVG1)
However they may be outdated ?
I can't get them to work, any pointers would be appreciated
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...