[Plugin] : SVG Canvas (vector graphics !)

Post your completed addons to share with the community

Post » Thu Aug 16, 2012 5:04 pm

Updated first post, with the possibility of a base64 string dump for the SVG canvas. (Nudge @chrisbrobs ).
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Fri Aug 17, 2012 5:53 pm

[QUOTE=Pode] Updated first post, with the possibility of a base64 string dump for the SVG canvas. (Nudge @chrisbrobs ).[/QUOTE]

Thankyou
B
19
S
6
G
7
Posts: 1,206
Reputation: 7,300

Post » Sat Aug 18, 2012 7:27 pm

Pode@
'You can also change a property from a specific item after it has been drawn, alhtough you need to the SVG name of the property (for example, the circle radius in SVG is just r)'

Can I change the 'fill color' from a single color to a linear gradient after the shape has been drawn ?

For example-

<svg width="264" height="140" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient y2="0.51563" x2="0.47266" y1="0.03906" x1="0.47266" id="svg_4">
<stop stop-color="#e3e3f2" offset="0"/>
<stop stop-color="#4c4c4c" offset="1"/>
</linearGradient>
</defs>
<g>
<title>Layer 1</title>
<rect ry="20" rx="20" id="svg_1" height="128" width="256.99998" y="5.99999" x="3" stroke-width="3" stroke="#000000" fill="url(#svg_4)"/>
</g>
</svg>


Tried various combinations, but I can't get it to work?
B
19
S
6
G
7
Posts: 1,206
Reputation: 7,300

Post » Sat Aug 18, 2012 8:52 pm

@chrisbrobs : I made it to work with simple properties. Your gradient is a declared filter. I need to check how I implemented it .
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Sat Aug 18, 2012 8:55 pm

[QUOTE=Pode] @chrisbrobs : I made it to work with simple properties. Your gradient is a declared filter. I need to check how I implemented it .[/QUOTE]

Got it working.

1, Add the following in <defs>

<linearGradient y2="0.51563" x2="0.47266" y1="0.03906" x1="0.47266" id="svg_5">
<stop stop-color="#c7caed" offset="0"/>
<stop stop-color="#2b4ce2" offset="1"/>
</linearGradient>

2, Add event to change atribute 'fill="url(#svg_5)"

Regards

B
19
S
6
G
7
Posts: 1,206
Reputation: 7,300

Post » Sun Sep 02, 2012 9:28 am

Can you add support for something akin to this, where you can specify the width/height of an SVG canvas image from an object in C2? The reason I'm interested in this is that my C2 project autoscales to the browser and using 100% for width/height makes the svg canvas scale depending on where it is located. Also, using your http only trick makes the svg stick to a certain size with no way for me to adjust it.

"<image x='0' y='0' width='SVGCanvas.Width' height='SVGCanvas.Height' xlink:href='http://openclipart.org/people/tzunghaor/orc.svg'/>"

And, even possibly something like this:

"<image x='Mouse.X(\"MainLayer"\)' y='Mouse.Y(\"MainLayer\")' width='PlayerBoundingBox.Width' height='PlayerBoundingBox.Height' xlink:href='http://openclipart.org/people/tzunghaor/orc.svg'/>"

That'd make the svg canvas pretty useful I think.

Also, would it be possible to animate the svgs? I realize I could paste over and over, but could there be an automatic feature of the SVG canvas that you can give it a list of SVG files similar to how the Sprite works? Then we could set the animation frames per second and it would flip? That'd be pretty amazing. Or, what is the recommended way of approaching this.

And, is it possible to do a pure animation like this:

"<image x='0' y='0' width='150' height='150' xlink:href='http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg'/><g><animateTransform attributeName='transform' attributeType='XML' type='rotate' from='0' to='360' begin='0s' dur='3s' repeatCount='indefinite'/>
      <use xlink:href='#black_stuff' stroke='#EEE' stroke-width='7'/>
      <use xlink:href='#black_stuff' stroke='#DDD' stroke-width='4'/>
      <use xlink:href='#black_stuff' stroke='#999' stroke-width='2'/>
      <use xlink:href='#black_stuff' stroke='black' stroke-width='1'/>
   </g>"

I couldn't get this to work, it did not animate.

Thanks.

EDIT: I've decided to retract my question, since I just realized that the SVGCanvas is intended to be stretched across the entire layout and multiple SVG are meant to be paste into it at different locations and sizes. However, this still doesn't address the scaling issue and the lack of a way to access object parameters.

EDIT 2: I just discovered something that makes this impossible to use. The SVGCanvas isn't honoring the layer it has been added to, and it is drawing over all layers. This means that even if I only want it in my background layer it also shows up on my title layout whether I like it or not.palisade2012-09-02 09:43:08
B
2
Posts: 1
Reputation: 252

Post » Sun Sep 02, 2012 10:34 am

palisade@
EDIT: I've decided to retract my question, since I just realized that the SVGCanvas is intended to be stretched across the entire layout and multiple SVG are meant to be paste into it at different locations and sizes. However, this still doesn't address the scaling issue and the lack of a way to access object parameters.
------------------------------------------------
There is an option 'Change attribute'

For example...if you wanted to change the height of a shape-



This would change the height to 80.

Pode will have to answer your other questions.chrisbrobs2012-09-02 10:35:58
B
19
S
6
G
7
Posts: 1,206
Reputation: 7,300

Post » Fri Oct 05, 2012 6:05 pm

SVG Edit can not export objects with a blur.
Is there a way to run SVG Edit's PNG export feature through Pode to render the blur as well?
B
2
Posts: 1
Reputation: 252

Post » Fri Oct 05, 2012 7:22 pm

@palisade @chrissbrobs : I'm planning an update to the SVG plugin.
There's still a problem : when rendering a SVG file to the <canvas> tag, evetyhing works fine with FF (I can do a toDataURL() after that), but Chrome has a browser-wide bug that marks the canvas as tainted when drawing a SVG file to the canvas.
So, since I can't draw SVG vector as classic Sprite objects, I draw that as an overlayed <div>, above everything. That's why I can't respect the layout order. As soons as the webkit bug is closed, I'll change the way it works.
I'll update the plugin with some accessor at that time.

@dezigns333 : I don't really understand what you want to do with SVG Edit. Can you provide an exemple ?
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Tue Oct 09, 2012 4:12 pm

Hi @pode @chrissbrobs and all others guys,

I am using this plugin to build "talking baloons".

I mount the string, like you can see above:

"<path d=""m 50,5 c -24,0 -44,19 -44,44 l 0,11 c 0,24 19,44 44,44 l 23,0 -2,39 29,-39 330,0 c 24,0 44,-19 44,-44 l 0,-11 c 0,-24 -19,-44 -44,-44 z"" stroke=""black"" stroke-width=""5"" fill=""white"" transform=""scale(1,1)""/><text id=""TextElement"" x=""60"" y="47" style=""font-family:Verdana;font-size:24"">""Ol motorista, seja BEM-VINDO Empresa de Cimentos Liz.""</text>"

And it is working fine, BUT when I wanna change the text and resize the SVG, by inserting another string I do not has sucess.

I tryed to destroy the SVG canvas and create a new one, it works but the old one keep showing, and if the new one is smaller there are a trouble.

Anybody can help?
B
90
S
5
G
8
Posts: 165
Reputation: 7,648

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: X3M and 1 guest