A way to draw and fill a svg with vivus.js

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

Post Reply
User avatar
Posts: 112
Joined: Sun Oct 16, 2011 11:01 am

A way to draw and fill a svg with vivus.js

Post by Fender » Fri Oct 04, 2019 6:50 pm

I asked Pablo if the extension Vivus.js could be expanded with a fill option ,look at my post
https://www.wysiwygwebbuilder.com/forum ... 28&t=85153 on the bottom of the post.

Reading on the Github about vivus.js I came across this post
I changed my svg accordingly, used it with the vivus extension and I have a fill and
linedrawing on my svg in WYSIWYG.
Below the structure of the svg:

Code: Select all

 <svg viewBox="0 0 175 256"  xmlns="http://www.w3.org/2000/svg" width="175" height="256">
	<pattern id="pathFill1" patternUnits="userSpaceOnUse" width="2" height="30" >
        <path stroke="#FFEBCD" d="M 1,0 l 0,30"  stroke-width="2"/>
	<pattern id="pathFill2" patternUnits="userSpaceOnUse" width="2" height="30" >
        <path stroke="red" d="M 1,0 l 0,30"   stroke-width="2"/>
    <path fill="url(#pathFill1)" stroke="darkgray" stroke-width="2"
      d="M157.068 33H165c4.77 0 9 4.464 9 9.706v202.758c0 5.243-4.288 9.536-9.524 9.536H10.524C5.288 255 1 250.707 1 245.464V42.707C1 37.464 5.06 33 10.017 33h9.203" />
	     <path fill="url(#pathFill2)" stroke="darkgray" stroke-width="2"
       d="M67 33V22.35c0-11.286 8.974-20.56 20.353-20.56 5.688 0 10.91 2.327 14.574 6.08C105.69 11.547 108 16.66 108 22.35V33" />
	     <path fill="url(#pathFill2)" stroke="darkgray" stroke-width="2"
       d="M103.302 33H157v45H19V33h52.72" />
      <path d="M95.068 25.237c0 4.293-3.474 7.785-7.76 7.785-4.284 0-7.758-3.492-7.758-7.785 0-4.302 3.474-7.785 7.757-7.785 4.287 0 7.76 3.482 7.76 7.785z" />
	  <g stroke="black" stroke-width="2" fill="none">
      <path d="M18.696 103h137.896v.17" />
      <path d="M18.738 127h42.64v.308" />
      <path d="M18.738 155h137.854v.068" />
      <path d="M18.738 178h137.854v-.006" />
      <path d="M18.696 227h137.868v-.21" />
Change your svg in notepad++
Everything between the defs is related to your fills only change the colors and maybe the stroke size but not the pattern id!
`for the path fill <path and </path> must be removed from your svg. Each path you want to be filled start with d= and ends with " />
Between the g tag you can asign just a stroke drawing
Look in my svg how it is done.
Your greatest help is here https://maxwellito.github.io/vivus-instant/
When you have changed your svg you can upload it here and see the result, when you see the desired result
you can use your file in WYSIWYG with the Vivus.js extension, you don't need the file generated by vivus instant it is
just a quick way to test.
Not all browsers show a local preview due to cors policy! Edge however show the animation in local preview
Have fun

Post Reply