The lightweight library for manipulating and animating SVG

Overview
Comments
  • Declarative Animations

    Declarative Animations

    It would be awesome to have declarative animations in SVG.js, the current behaviour of svg.js when asking one animation to occur after another is this:

    https://codepen.io/saivan/pen/OzbWNW

    But for example, if we always wanted an animation to finish in say 500ms even if there is a chain of animations that are supposed to run for the next 20s, we would just discard all of the other animations in the chain and force this animation to occur and be finished within 500ms.

    This is especially useful for interaction. For example, if I have an animation playing where a ball is supposed to do 20 tumbles over 10 seconds; and then I want to allow the user to click on the ball to move it to another place, I don't want to have to wait for the ball to finish its animation chain (or even its current animation), I just want it to move immediately to the new position, tweening smoothly from whatever state it is in when the user clicks on the ball.

    This declarative style of animation is already what css uses, although css actually has a pretty serious bug in chrome when dealing with matrices as you can see here:

    https://bugs.chromium.org/p/chromium/issues/detail?id=797472

    I have put together another pen that shows how this animation style could be useful don't view it in chrome because of this bug (although it might be fun to watch for the lols):

    https://codepen.io/saivan/pen/baBgpR

    Possible API

    The syntax change could be small, something like:

    ball.animate(duration, ease, delay, declarative)
    

    If the declarative flag is passed, all animations in the chain will be removed, and the object will tween smoothly from its current state to a new state, discarding all animations that are enqueued.

    Possible Implementation

    Since an animation may already be running, we would need to decay its effect on the next animation, so we could perhaps say:

    // define a start animation, a mid animation and an end animation
    // assume we were running an animation where t = [0, 1]
    // and we interrupted it with mid @ t=0.6, so mid is the point at which the new animation starts
    tInterrupt = 0.6 // The time on the old animation where we interrupted it and reset t to zero
    decayRate = 20
    decay = Math.exp(- decayRate * t)
    oldContribution = t + tInterrupt < 1
       : decay * ease(t + tInterrupt) * (end - mid)
       : 0
    value = mid + oldContribution + ease(tNew) * (end - mid)
    

    The decay value will make the contribution of the old animation go to zero, and if our time exceeds the old interrupt point, it is simply no longer included in the calculation for the next term.

    I'm not sure how much complexity this will add, but it could be really nice and it will avoid the jank that seems to happen with the css approach I believe.

    Any thoughts or comments?

    opened by saivan 64
  • Can I tell SVG.js to use limited decimal precision?

    Can I tell SVG.js to use limited decimal precision?

    For the actual proposal look at this comment

    I just created a hexagon using SVG.js and the SVG.shapes.js plugin. It works great!

    However, many of the polygon’s points have decimals like:

    • 49.999999999999986 or 50.00000000000001 (I assume a rounding error—should be 50, right?), and
    • 173.2050803946182 (I assume it’s “just correct”, but I’d like to limit to 2 or 3 decimal places)

    Is there a way to tell SVG.js to either:

    • check for .999999… or .0000000001 and round to the nearest integer?, or
    • limit decimal precision to 2/3/«x» number of places?, or
    • offer a hook-in location for client code to pre- or post-process calculations of numbers?

    (I tried to fix this by calling the .spof() when calling SVG(), but it seemed to have no effect…)


    proposal good first issue 
    opened by Zearin 59
  • Fix TBox

    Fix TBox

    The TBox example, x and y doesn't follow scale, even though the docs suggest that they should.

    The TBox can be fixed easily:

    • get the bbox and apply the scale transformation, resulting in a correctly sized tbox
    • get the rbox and use it's cx and cy values to position the tbox at its center
    bug wontfix documentation 
    opened by dotnetCarpenter 42
  • Does not seem to work in a stand-alone SVG

    Does not seem to work in a stand-alone SVG

    Having included svg.js in a stand-alone SVG and added the basic draw example code to be run off the DOMContentLoaded event, I'm getting an error in the following code:

      /* If the target is an svg element, use that element as the main wrapper.
           This allows svg.js to work with svg documents as well. */
        this.constructor
          .call(this, this.parent.nodeName == 'svg' ? this.parent : SVG.create('svg'))
    

    Uncaught TypeError: Cannot read property 'nodeName' of null

    This is using Google Chrome 32.0.1700.102 on Ubuntu and the latest version of svg.js downloaded today.

    opened by vadi2 36
  • Missing methods on SVG.FX in svg.js.d.ts

    Missing methods on SVG.FX in svg.js.d.ts

    Installed using Ionic2. First test basic animation worked. Rotate fail. v2.4.0

    Apart from the error my goal is to load an SVG icon and animate it but did not see how to do that in the docs.

    capture009 capture010 capture011

    wontfix typescript 
    opened by peterennis 32
  • Move svg.js from wout to an organization

    Move svg.js from wout to an organization

    Since we want contributors to have access to e.g. travis-ci settings, which requires administration privileges to the github account, we want to move svg.js to an organization.

    Steps before we fully moved to svgdotjs

    Here is a list of links that will need to change, when we change github account for svg.js:

    opened by dotnetCarpenter 32
  • Move element along path

    Move element along path

    In order to make this I have tried to use the once function, but 1)once is called an unsufficient number of times., and 2) the move function seems not to work. Maybe there is a simpler way to to this and I cannot figure it out. Here's my function attached

    moveAlongPath.txt

    question 
    opened by SimoneMSR 30
  • 2.5.0 release

    2.5.0 release

    Things that needs to be visited before we release 2.5.0

    • [x] Documentation for #582
    • [x] Documentation for #590
    • [x] ~Documentation for make the method plot a getter when no parameter is passed for SVG.Polyline,SVG.Polygon, SVG.Line, SVG.Path (related #547)~
    • [x] Documention for allow SVG.PointArray to be passed flat array
    • [x] ~Documentation for allow plot to be called with 4 parameters when animating an SVG.Line~
    • [x] ~Documentation for relative value for SVG.Number are now calculated in its morph method (related #547)~
    • [x] ~Fix TBox #594~
    • [x] Add unit tests #593
    • [x] Create an issue with jsfiddle to update to SVG.js 2.5.0
    • [x] Decide if and how bbox() can be augmented with a method to get the transformed vectors (see #594 for motivation)
    opened by dotnetCarpenter 28
  • Need plugin update to follow 'strict mode' restrictions

    Need plugin update to follow 'strict mode' restrictions

    Hello,

    Using svg.js from npm in a meteor project. I'm not sure my problem is general, but since v2.52 with 'strict mode' control, I need to update manually the filter extension for accessing SVG, with a require

    Example in svg.filter.js

    ;(function() {
      var SVG = require('svgjs');
      // Main filter class
      SVG.Filter = SVG.invent({
    [...]
    

    I assume the problem is also true for other plugins.

    Regards

    opened by xlinbsd 27
  • Is there a way to make svg.js work with jsdom

    Is there a way to make svg.js work with jsdom

    Hi, I'm trying to make svg.js work with jsdom in node.js but it looks like jsdom work with svg 1.1. Is there a way to make the library work with Node.js using jsdom or something else?

    opened by Tpower36 27
  • Pointarray - parse coordinates with Illustrator style space and or comma

    Pointarray - parse coordinates with Illustrator style space and or comma

    This fixes #525 by accepting/parsing coordinate strings where x and y is separated by comma and or by space - we count the shape coordinates until (and including) the maximum even number.

    Illustrator exports points in the following format: <polygon class="cls-1" points="221.08 191.79 0.46 191.79 0.46 63.92 63.8 0.46 284.46 0.46 284.46 128.37 221.08 191.79"/> but SVG.js only support the following format <polygon class="cls-1" points="221.08,191.79 0.46,191.79 0.46,63.92 63.8,0.46 284.46,0.46 284.46,128.37 221.08,191.79"/>. Which makes it difficult to implement graphic designers work.

    This PR is made upon #527 in anticipation for that being merged, but perhaps I should rebase this against the current master?

    opened by dotnetCarpenter 26
  • Feature request: `group(id)` constructor for SVG.G

    Feature request: `group(id)` constructor for SVG.G

    Feature request: group(id) constructor for SVG.G

    to my mind a <g> tag's main attribute is its id (just like the width and height of a rect) and I would expect it to be set similarly intuitively during construction. Without a cumbersome additional call of .attr('id', 'ID').

    so instead of

    let theGroup = draw.group()
    theGroup.attr('id', 'myGroupID')
    

    simply

    let theGroup = draw.group("myGroupID")
    

    to get

    <svg>
      <g id="myGroupID">
      </g>
    </svg>
    

    (love your lib though ❤️ )

    opened by jango-fx 5
  • Docs Updates

    Docs Updates

    Could the docs be reviewed in the following areas?

    Suggestion 1 - Import Note https://svgjs.dev/docs/3.0/getting-started/ Current:

    'Note: All properties that were former available on the global SVG object need to be imported now, see example below:'

    Revised:

    'Note: Since X.X.X, All properties that were formerly available on the global SVG object need to be imported now, see example below:'

    Where X.X.X is the version, as I don't know what version it started with if I'm using a legacy codebase that I'm updating. As many people will only hit this as a problem when they're getting bundler errors.

    Suggestion 2 - Import Example https://svgjs.dev/docs/3.0/getting-started/

    import { SVG, extend as SVGextend, Element as SVGElement } from '@svgdotjs/svg.js'

    Could use an actual example, rather than generic pseudo-code. Not being familiar with the whole code base, I thought that Element was going to bring in all the elements. And is there any need to alias? If so maybe explain why? Also if you have some sample code using SVG.ClipPath() is there any way to import the element so that sample code works?

    Suggestion 3 - ClipPath Defs https://svgjs.dev/docs/3.0/shape-elements/ Whilst there is a discussion of how the constructor methods (eg. draw.clipPath() )and raw constructor ( clip = new ClipPath() ) difference here, there's no explanation in the docs of how ClipPath needs to be added to Defs. Adding something about it would be helpful, whether that's at the top of that doc page or within the ClipPath section, not sure the best place, but it's undocumented at the moment.

    Bug? When using the left nav to navigate between directly to an API (eg. SVG.Symbol and SVG.Circle) or when using the search, it doesn't go to the right heading (inline anchor) on a given page the first time. It seems to need to be clicked twice.

    Benefits

    • Making the docs easier to understand to newcomers or people who aren't deeply knowledgeable of SVG, JS and this project
    opened by RieMars 3
  • rotate is not working with transform

    rotate is not working with transform

    Hello,

    i am working on rotate element with left top corner and right left corner likewise all.. and i have added following code .. its working on if rotate angle less than 180.. its working fine if i make rotate: 90 or rotate: 120 but if i increase value like 360 , 720.. its not working.. plz have a look on my code

    regards harshad

     scaleele.animate(2000).transform({
        rotate: 320,
        origin: "top left",
      });
    
    opened by patson12 0
  • Generated SVGs are sometimes missing `xmlns:svgjs` namespace declaration

    Generated SVGs are sometimes missing `xmlns:svgjs` namespace declaration

    Bug report

    Modifying an existing SVG sometimes adds svgjs:data attributes without declaring the svgjs XML namespace by using xmlns:svgjs="http://svgjs.dev/svgjs". This causes an XML parsing error.

    Fiddle

    https://jsfiddle.net/1x8fjk9e/3/

    Both the input and output SVG look fine when rendered together on the same page (ignore the CSS issues, I'm not really sure why those are happening):

    image

    However, if you click the click here to view the broken output SVG link, you get the following error:

    image

    Explanation

    • What is the behaviour you expect?
      • SVGs generated by svg.js using svg.svg() work when saved to a .svg file
    • What is happening instead?
      • Rendering the SVGs fails due to Namespace prefix svgjs for data on text is not defined error.
    • What error message are you getting?
      • Namespace prefix svgjs for data on text is not defined. I fixed this by adding an svg.attr("xmlns:svgjs", require("@svgdotjs/svg.js").namespaces.svgjs); and now the generated SVGs seem to work fine!

    This bug was originally discovered when trying to modify the width=100% to the actual pixel value using svgdom in Node.JS.

    Node.JS reproduction

    Input.svg

    input

    Test script

    const { createSVGWindow } = require("svgdom");
    const { SVG, registerWindow } = require("@svgdotjs/svg.js");
    
    const window = createSVGWindow();
    registerWindow(window, window.document);
    
    const svg = SVG(require("fs").readFileSync("./input.svg", {encoding: "utf8"}))
    
    svg.node.setAttribute("width", svg.bbox().width);
    
    require("fs").writeFileSync("./output.svg", svg.svg())
    

    Output.svg

    output

    diff input.svg output.svg

    (I've run prettier on both the SVGs first to make the diff more beautiful)

    6c6
    <   width="100%"
    ---
    >   width="622.2148603262063"
    9c9
    <   >#mermaid-1668355833995 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1668355833995 .error-icon{fill:#552222;}#mermaid-1668355833995 .error-text{fill:#552222;stroke:#552222;}#mermaid-1668355833995 .edge-thickness-normal{stroke-width:2px;}#mermaid-1668355833995 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1668355833995 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1668355833995 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1668355833995 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1668355833995 .marker{fill:#333333;stroke:#333333;}#mermaid-1668355833995 .marker.cross{stroke:#333333;}#mermaid-1668355833995 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1668355833995 .edge{stroke-width:3;}#mermaid-1668355833995 .section--1 rect,#mermaid-1668355833995 .section--1 path,#mermaid-1668355833995 .section--1 circle,#mermaid-1668355833995 .section--1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .section--1 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon--1{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge--1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth--1{stroke-width:17;}#mermaid-1668355833995 .section--1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-0 rect,#mermaid-1668355833995 .section-0 path,#mermaid-1668355833995 .section-0 circle,#mermaid-1668355833995 .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .section-0 text{fill:black;}#mermaid-1668355833995 .node-icon-0{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .edge-depth-0{stroke-width:14;}#mermaid-1668355833995 .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-1 rect,#mermaid-1668355833995 .section-1 path,#mermaid-1668355833995 .section-1 circle,#mermaid-1668355833995 .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-1 text{fill:black;}#mermaid-1668355833995 .node-icon-1{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-1{stroke-width:11;}#mermaid-1668355833995 .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-2 rect,#mermaid-1668355833995 .section-2 path,#mermaid-1668355833995 .section-2 circle,#mermaid-1668355833995 .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-2 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-2{stroke-width:8;}#mermaid-1668355833995 .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-3 rect,#mermaid-1668355833995 .section-3 path,#mermaid-1668355833995 .section-3 circle,#mermaid-1668355833995 .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-3 text{fill:black;}#mermaid-1668355833995 .node-icon-3{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-3{stroke-width:5;}#mermaid-1668355833995 .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-4 rect,#mermaid-1668355833995 .section-4 path,#mermaid-1668355833995 .section-4 circle,#mermaid-1668355833995 .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-4 text{fill:black;}#mermaid-1668355833995 .node-icon-4{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-4{stroke-width:2;}#mermaid-1668355833995 .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-5 rect,#mermaid-1668355833995 .section-5 path,#mermaid-1668355833995 .section-5 circle,#mermaid-1668355833995 .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-5 text{fill:black;}#mermaid-1668355833995 .node-icon-5{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-5{stroke-width:-1;}#mermaid-1668355833995 .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-6 rect,#mermaid-1668355833995 .section-6 path,#mermaid-1668355833995 .section-6 circle,#mermaid-1668355833995 .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-6 text{fill:black;}#mermaid-1668355833995 .node-icon-6{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-6{stroke-width:-4;}#mermaid-1668355833995 .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-7 rect,#mermaid-1668355833995 .section-7 path,#mermaid-1668355833995 .section-7 circle,#mermaid-1668355833995 .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-7 text{fill:black;}#mermaid-1668355833995 .node-icon-7{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-7{stroke-width:-7;}#mermaid-1668355833995 .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-8 rect,#mermaid-1668355833995 .section-8 path,#mermaid-1668355833995 .section-8 circle,#mermaid-1668355833995 .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-8 text{fill:black;}#mermaid-1668355833995 .node-icon-8{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-8{stroke-width:-10;}#mermaid-1668355833995 .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-9 rect,#mermaid-1668355833995 .section-9 path,#mermaid-1668355833995 .section-9 circle,#mermaid-1668355833995 .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-9 text{fill:black;}#mermaid-1668355833995 .node-icon-9{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-9{stroke-width:-13;}#mermaid-1668355833995 .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-10 rect,#mermaid-1668355833995 .section-10 path,#mermaid-1668355833995 .section-10 circle,#mermaid-1668355833995 .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-10 text{fill:black;}#mermaid-1668355833995 .node-icon-10{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-10{stroke-width:-16;}#mermaid-1668355833995 .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-root rect,#mermaid-1668355833995 .section-root path,#mermaid-1668355833995 .section-root circle{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-1668355833995 .section-root text{fill:#ffffff;}#mermaid-1668355833995 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-1668355833995 .edge{fill:none;}#mermaid-1668355833995 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g
    ---
    >   >#mermaid-1668355833995 {font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1668355833995 .error-icon{fill:#552222;}#mermaid-1668355833995 .error-text{fill:#552222;stroke:#552222;}#mermaid-1668355833995 .edge-thickness-normal{stroke-width:2px;}#mermaid-1668355833995 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1668355833995 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1668355833995 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1668355833995 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1668355833995 .marker{fill:#333333;stroke:#333333;}#mermaid-1668355833995 .marker.cross{stroke:#333333;}#mermaid-1668355833995 svg{font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;font-size:16px;}#mermaid-1668355833995 .edge{stroke-width:3;}#mermaid-1668355833995 .section--1 rect,#mermaid-1668355833995 .section--1 path,#mermaid-1668355833995 .section--1 circle,#mermaid-1668355833995 .section--1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .section--1 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon--1{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge--1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth--1{stroke-width:17;}#mermaid-1668355833995 .section--1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-0 rect,#mermaid-1668355833995 .section-0 path,#mermaid-1668355833995 .section-0 circle,#mermaid-1668355833995 .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .section-0 text{fill:black;}#mermaid-1668355833995 .node-icon-0{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .edge-depth-0{stroke-width:14;}#mermaid-1668355833995 .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-1 rect,#mermaid-1668355833995 .section-1 path,#mermaid-1668355833995 .section-1 circle,#mermaid-1668355833995 .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-1 text{fill:black;}#mermaid-1668355833995 .node-icon-1{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-1{stroke-width:11;}#mermaid-1668355833995 .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-2 rect,#mermaid-1668355833995 .section-2 path,#mermaid-1668355833995 .section-2 circle,#mermaid-1668355833995 .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-2 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-2{stroke-width:8;}#mermaid-1668355833995 .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-3 rect,#mermaid-1668355833995 .section-3 path,#mermaid-1668355833995 .section-3 circle,#mermaid-1668355833995 .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-3 text{fill:black;}#mermaid-1668355833995 .node-icon-3{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-3{stroke-width:5;}#mermaid-1668355833995 .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-4 rect,#mermaid-1668355833995 .section-4 path,#mermaid-1668355833995 .section-4 circle,#mermaid-1668355833995 .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-4 text{fill:black;}#mermaid-1668355833995 .node-icon-4{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-4{stroke-width:2;}#mermaid-1668355833995 .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-5 rect,#mermaid-1668355833995 .section-5 path,#mermaid-1668355833995 .section-5 circle,#mermaid-1668355833995 .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-5 text{fill:black;}#mermaid-1668355833995 .node-icon-5{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-5{stroke-width:-1;}#mermaid-1668355833995 .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-6 rect,#mermaid-1668355833995 .section-6 path,#mermaid-1668355833995 .section-6 circle,#mermaid-1668355833995 .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-6 text{fill:black;}#mermaid-1668355833995 .node-icon-6{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-6{stroke-width:-4;}#mermaid-1668355833995 .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-7 rect,#mermaid-1668355833995 .section-7 path,#mermaid-1668355833995 .section-7 circle,#mermaid-1668355833995 .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-7 text{fill:black;}#mermaid-1668355833995 .node-icon-7{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-7{stroke-width:-7;}#mermaid-1668355833995 .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-8 rect,#mermaid-1668355833995 .section-8 path,#mermaid-1668355833995 .section-8 circle,#mermaid-1668355833995 .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-8 text{fill:black;}#mermaid-1668355833995 .node-icon-8{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-8{stroke-width:-10;}#mermaid-1668355833995 .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-9 rect,#mermaid-1668355833995 .section-9 path,#mermaid-1668355833995 .section-9 circle,#mermaid-1668355833995 .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-9 text{fill:black;}#mermaid-1668355833995 .node-icon-9{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-9{stroke-width:-13;}#mermaid-1668355833995 .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-10 rect,#mermaid-1668355833995 .section-10 path,#mermaid-1668355833995 .section-10 circle,#mermaid-1668355833995 .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-10 text{fill:black;}#mermaid-1668355833995 .node-icon-10{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-10{stroke-width:-16;}#mermaid-1668355833995 .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-root rect,#mermaid-1668355833995 .section-root path,#mermaid-1668355833995 .section-root circle{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-1668355833995 .section-root text{fill:#ffffff;}#mermaid-1668355833995 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-1668355833995 .edge{fill:none;}#mermaid-1668355833995 :root{--mermaid-font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;}</style><g
    57a58
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    69a71
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    87a90
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    105a109
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    120a125
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    138a144
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    156a163
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    169a177
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    187a196
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    205a215
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    226a237
    >           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
    
    opened by aloisklink 0
  • how to move and rotate together ?

    how to move and rotate together ?

    opened by echolove38 2
  • TSPAN dx value in SVG which is not connected to DOM

    TSPAN dx value in SVG which is not connected to DOM

    I comment in this section, but this is probably a problem for itself, and again it refers to tspans, and their dx value. I've been working with svg that isn't attached to the DOM, and I've come to the conclusion that this part is causing the problem (tspan): const fontSize = globals.window.getComputedStyle(this.node) Since SVG is not part of DOM, getComputedStyle cannot read font size and value always will be 0. Setting value by .dx(20) also doesn't work.

    Originally posted by @markocrni in https://github.com/svgdotjs/svg.js/issues/1088#issuecomment-1239192838

    opened by markocrni 0
Releases(3.1.2)
  • 3.1.2(Jan 26, 2022)

    Fixed

    • fixed several type issues (#1249, #1233, #1231, #1223, #1215)
    • fixed css() returning camelCased properties even though they were specified in kebap-case
    • fixed ObjectBag loosing information when calling valueOf() (Numbers lost its unit)
    • fixed parents() (#1235)
    • fixed nodeOrNew() to work in object tags as well (#1219)
    Source code(tar.gz)
    Source code(zip)
    svg.js.zip(290.35 KB)
  • 3.1.1(Jun 25, 2021)

  • 3.1.0(Jun 13, 2021)

    Fixed

    • fixed zoom() method of runner which was passed a wrong parameter
    • fixed positioning methods of TSpan to position them by its bounding box
    • fixed flip() method which flips correctly by center by default now and accepts correct arguments
    • fixed a case in rbox() where not always all values of the box were updated
    • fixed getOrigin() function used by transform() so that all origin popssibilities specified in the docs are working (#1085)
    • fixed positioning of text by its baseline when using amove()
    • fixed tons of typings in the svg.d.ts file and relaxed type requirements for put() and parent()
    • fixed adopter when adopting an svg/html string. It had still its wrapper as parentNode attached
    • fixed put() which correctly creates an svgjs object from the passed element now before returning
    • fixed parent() which correctly returns a Dom instance when parent is the document or document-fragment
    • fixed add() which correctly removes namespaces of non-root svg elements now when added to another svg element (#1086)
    • fixed isRoot() which correctly returns false, if the element is in a document-fragment
    • fixed replace() which works without a parent now, too
    • fixed defs() which correctly returns null when called on a detached node that is not a root node
    • fixed reference() which correctly returns null instead of throwing when specifying an attribute which holds a number
    • fixed flatten() which correctly flattens now but doesnt accept parameters anymore (makes no sense)
    • fixed ungroup() which now inserts the elements at the correct position in the correct order and has position as second argument now
    • fixed position for transform() to also allow a position of 0
    • fixed bbox() of PathArray and PointArray which returns an instance of Box now
    • fixed bug in creation of PointArray which had still references to source arrays in it
    • fixed PID controller and makeSetterGetter function
    • fixed Queue.push which didnt let you push queue items
    • fixed Timeline.reverse() which did exactly the opposite of what you would expect when passing true/false
    • fixed cancelAnimationFrame-mock for tests
    • fixed animate when=after to be really "now" when no runner is on the timeline
    • fixed animate attr which is also retargetable now
    • fixed internals of ObjectBag which can hold other Morphable values now
    • fixed animate transform which didnt change its origin on retarget for declaritive animations
    • fixed path parsing (#1145)
    • fixed clone() to return the correct instance (#1154)

    Added

    • added second Parameter to SVG(el, isHTML) which allows to explicitely create elements in the HTML namespace (#1058)
    • added unlink() and linker() to hyperlinked elements to remove or access the underling <a> element
    • added wrap() method to Dom which lets you wrap an element by another one
    • added orient() method to Marker
    • added options parameter to dispatch() and fire() to allow for more special needs
    • added newLine() constructor to Text to create a tspan marked as new line (#1088)
    • added Fragment as a wrapper for document-fragment
    • added position argument for toParent()
    • added position argument for toRoot()
    • added attr syntax for data() method
    • added index and array parameter when passing a function to List.each() so that it mostly behaves like map
    • added possibility to pass a transform object to PointArray.transform() similar to Point
    • added with-last as when to animate and schedule to let an animation start with the start of the last one in the timeline
    • added lots of tests in es6 format
    • added geometry and positioning methods to A (#1110)

    Deleted

    • deleted undocumented Matrix.compose() method which did the same as new Matrix() or Matrix.transform()
    • deleted undocumented Path.morph() and Path.at() which was replaced with Morphables in v3
    Source code(tar.gz)
    Source code(zip)
    svg.js.zip(288.70 KB)
  • 3.0.16(Nov 12, 2019)

  • 3.0.15(Nov 8, 2019)

  • 3.0.14(Oct 31, 2019)

  • 3.0.13(Jun 12, 2019)

  • 3.0.12(Feb 19, 2019)

  • 3.0.11(Jan 22, 2019)

  • 3.0.10(Jan 14, 2019)

  • 3.0.9(Jan 14, 2019)

  • 3.0.8(Jan 13, 2019)

  • 3.0.7(Jan 13, 2019)

  • 3.0.6(Jan 12, 2019)

  • 3.0.5(Dec 12, 2018)

    • fixed parser which didnt have all reqired css rules and not focusable=false
    • group x(), y(), width(), height(), dx(), dy() now correctly change the bbox of the group by moving/resizing all children
    • fixed timeline which fired finished to early
    • fixed Animator.frame(). The passed callback gets the current time now (same as RAF)
    • allow loop(true) which is the same as loop()
    Source code(tar.gz)
    Source code(zip)
    svg.js.zip(391.36 KB)
  • 3.0.4(Dec 7, 2018)

    • fixed zoom which was added correctly and is animatable now
    • fixed Runner which merges transformations on the correct frame and in the correct way now
    • fixed condition on which transforms get deleted from an element when animating
    • fixed Timeline which executes Runner in the correct order now
    • fixed Svg which correctly deletes the defs reference on clear()
    Source code(tar.gz)
    Source code(zip)
    svg.js.zip(389.61 KB)
  • 3.0.3(Dec 5, 2018)

  • 3.0.2(Dec 3, 2018)

    • fixed List which still didn't have all method names it should have
    • fixed Runner which correctly handle retargeted controlled animations now
    • fixed Runner so that it is able to be persisted correctly
    • fixed Color which correctly handles empty strings now
    • fixed attr which correctly handles Objects of other kind now
    • fixed Morphable which correctly calculates the done flag now
    Source code(tar.gz)
    Source code(zip)
    svg.js.zip(379.08 KB)
  • 3.0.1(Dec 3, 2018)

  • 3.0.0(Dec 1, 2018)

    Added

    • added text() method to SVG.Path to create a textPath from this path (#705)
    • added SVG.HTMLNode which is the object wrapped around html nodes to put something in them
    • added dispatch() method on SVG.Element which returns the dispatched event for event cancelation (#550)
    • added isRoot() on SVG.Doc (#809)
    • added a linter during the npm build process
    • added beziere() and steps() to generate easing functions
    • added insertAfter() and insertBefore
    • added SVG.Style which can be created with style() or fontface() (#517)
    • added EventTarget which is a baseclass to get event abilities (#641)
    • added Dom which is a baseclass to get dom abilities
    • added round() which lets you round attribues from a node
    • added ax(), ay(), amove() to change texts x and y values directly (#787)
    • added possibility to pass attributes into a constructor like: new SVG.Rect({width:100})
    • added possibility to pass in additional attribues to element creators e.g. canvas.rect({x:100}) or canvas.rect(100, 100, {x:100}) (#796)
    • added SVG.List (#645)
    • added words() and element() to Dom because of (#935)
    • added lab, lch, hsl and cmyk color spaces (#790)
    • added random() method on SVG.Color to create random colors of different kinds (#939)

    Removed

    • removed SVG.Array.split() function
    • removed workaround for browser bug with stroke-width
    • removed polyfills
    • removed SVG.Set in favour of SVG.List
    • removed feature to set style with css string (e.g. "fill:none;display:block;")
    • removed loaded() and error() method on SVG.Image (#706)
    • removed sub-pixel offset fix
    • removed SVG.Nested (#809)
    • removed show() from SVG.A to avoid name clash (#802)
    • removed size() from SVG.Text to avoid name clash (#799)
    • removed native() function
    • removed Bare in favour of Dom (#935)

    Changed

    • gradients now have there corresponding node as type and not only radial/linear
    • SVG.Path.pointAt() correctly returns an SVG.Point now
    • replaced static reference to masker in SVG.Mask with the masker() method
    • replaced static reference to clipper in SVG.ClipPath with the clipper() method
    • replaced static reference to targets in SVG.Mask and SVG.ClipPath with the targets() method
    • moved all regexes to SVG.regex
    • new constructor signature for SVG.Image and load(): container.image(src, callback) / image.load(src, callback) (#706)
    • changed style() to css(). Now accepts array as input and returns object when no argument given (#517)
    • ids are not generated upon creation anymore. Instead they are generated when requested (#559)
    • SVG.extend() now expects exactly one module or an array of modules
    • SVG.Text.path() now returns an instance of SVG.TextPath (#705)
    • SVG.Text.path() does not move all contents to the textPath (#705)
    • SVG.TextPath now inherits from SVG.Text and can be manipulated the same way (#705)
    • SVG.Text.textPath() returns the first textPaths in the text element (#705)
    • renamed SVG.Stop constructor at() on SVG.Gradient to stop() (#707)
    • renamed fill() method on SVG.Gradient and SVG.Pattern to url() (#708)
    • renamed previous() method to prev()
    • changed childNodes to children (same for firstChild, lastChild, ...) (#710) - changed it back because of performance drop
    • moved defs() method from SVG.Parent to SVG.Element
    • SVG() can be called with css selector, node or svg string, now. Without an argument it creates a new SVG.Doc() (#646)
    • add(), put(), addTo(), putIn() now excepts all arguments accepted by SVG()
    • all SVG.* objects now can have a node as parameter when constructing
    • SVG() does not set a default size anymore
    • default constructor now has an optional node argument which is used to consruct the object e.g. new SVG.Rect(rectNode)
    • SVG.Elements constructor now tries to import svgjs:data from the node
    • SVG.on() calls the listener in the context of the passed object. el.on always uses the svg.js object as context
    • SVG.on()/off() and el.on()/off() now accepts multiple comma or space separated events e.g. "mousedown, foo bar" (#727)
    • Matrices now apply transformations like scale, translate, etc... by left multiplying them to simplify transformations
    • The way transform() works is now completely different. See the docs for more as soon as they are updated
    • merged SVG.Doc and SVG.Nested, added isRoot() on SVG.Doc() (#809)
    • The fx module was completely reworked to be faster and less error prone. For more information on how to use it refer to the docs
    • The whole lib is now splitted into es6 modules (#875)
    • Element.svg() now can can replace the current node, can export the children of a node and can take an export modifier to change/replace the exported nodes
    • ungroup() now breaks off one container and not more
    • clone() does not add the clone to the dom anymore
    • attr() excepts array now to get multiple values at once
    • SVG.Text.rebuild() now takes every font-size into account (#512)
    • fill() and stroke() return the fill and stroke attribute when called as getter (#789)
    • parents() now gives back all parents until the passed one or document
    • Image callback passes normal load event instead of custom object (#931)
    • renamed Doc to Svg and doc() to root (and toDoc()/toRoot()) (#932)
    Source code(tar.gz)
    Source code(zip)
    svg.js.zip(376.73 KB)
  • 2.7.1(Nov 30, 2018)

  • 2.7.0(Nov 13, 2018)

    Fixed

    • fixed calling parent() on documentFragments children (#927)
    • parser is not focusable anymore (#908)
    • SVG.Element.click(null) correctly unbinds the event (#878)
    • fix memory leak (#905)

    Added

    • SVG.Set now accepts another Set as input (#893)
    • on()/off() accepts multiple event names as input (backport from 3.0)
    Source code(tar.gz)
    Source code(zip)
  • 2.6.5(May 26, 2018)

    Fixed

    • fixed element.parent() which sometimes failed when used on detached documents (#759)
    • fixed SVG.Text.y() which didnt work correctly with SVG.Number (#778)
    • fixed SVG.Doc.clone() which throwed an error (#782)
    • fixed SVG.Mask.clone() which throwed an error (#782)
    • fixed SVG.PointArray having a reference to outside array in some cases (#803)
    • fixed reference() which failed when trying to use a reference which does not exist in the attribuets (#840)
    • fixed animate().attr() method which doenst work for d attribute of paths (#847)
    • fixed problems with CustomEvent polyfill in IE11 (#852)

    Added

    • added possibility to pass an array of point objects to SVG.PointArray (#803)
    Source code(tar.gz)
    Source code(zip)
  • 2.6.4(Feb 7, 2018)

  • 2.6.3(Jul 21, 2017)

  • 2.6.2(Jun 5, 2017)

    Added

    • added width() and height() methods to SVG.FX
    • added the intended functionality to call animate functions with multiple parameter (#671)

    Changed

    • updated Jasmine from 2.5.2 to 2.6.0
    • removed the typeof check in the initialisation of SVG.Matrix

    Fixed

    • fixed SVG.FX.once so that it add its callback on the last situation instead of the current one
    • fixed SVG.FX.step so that the animation doesn't stop if an afterAll callback call animate (#677)
    Source code(tar.gz)
    Source code(zip)
  • 2.6.0(Apr 21, 2017)

  • 2.5.3(Apr 17, 2017)

    This release fixes the typescript definition file as well as a bug with el.flip() which does not correctly flipped the shape when called without any argument

    Source code(tar.gz)
    Source code(zip)
  • 2.5.2(Apr 11, 2017)

    Version 2.5.2 fixes a 3 variables declarations that mistakenly where made global.

    SVG.js now runs in strict mode, using use strict, which gives a slight performance increase.

    Source code(tar.gz)
    Source code(zip)
Owner
SVG.js
We manage everything related to SVG.js.
SVG.js
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 937 Feb 5, 2021
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
Easy-to-use js library for building graphs using svg.

LineChart Easy-to-use js library for building graphs using svg. Examples How to use Just add linechart.js from 'src' directory to your project. And ad

Korpusov Maxim 8 Nov 21, 2022
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.8k Jan 3, 2023
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Jan 1, 2023
Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

z creative labs 2.7k Dec 29, 2022
📸 Generate image using HTML5 canvas and SVG

egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
JavaScript SVG parser and renderer on Canvas

canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders

null 3.3k Jan 4, 2023
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

Utkarsh Verma 78 Dec 24, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Jan 4, 2023
Minimalistic, animated SVG gauge. Zero dependencies

SVG Gauge Minmalistic, configurable, animated SVG gauge. Zero dependencies Buy me a coffee ☕ If you like my work please consider making a small donati

Aniket Naik 264 Dec 17, 2022
Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified

Metafizzy 9.5k Jan 3, 2023
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
A Cloudflare Worker that translates TeX to SVG

TeX SVG Worker A Cloudflare Worker that translates TeX to SVG.

JacobLinCool 6 Jan 9, 2023
A lightweight graphic library providing 2d draw for Apache ECharts

ZRender A lightweight graphic library which provides 2d draw for Apache ECharts. Documentation https://ecomfe.github.io/zrender-doc/public/ License BS

Baidu EFE team 5.5k Dec 30, 2022