Background: All the charts of the company I worked for were drawn with Echarts. After drawing for a period of time, I wanted to draw faster, so THIS article came into being.

This scheme is a complement to, rather than a replacement for, Echarts. It is best to use Echarts for basic diagrams such as line charts, bar charts, or simpler diagrams, and this pure SVG scheme can be used for more cumbersome echarts implementations.

Tools that might be used

  • Draw. IO editor:

    Web version: app.diagrams.net/

    Desktop version: github.com/jgraph/draw… An apricot is out in the wall, or looking for it in the crowd

  • Positive side expression tool regex101:

    Address: regex101.com/r/SHZPJp/1, or use a similar tool

steps

Make an example of Step by Step.

Open draw. IO and create a blank block diagram (of course, you can also create other block diagrams) :

Click or drag the pattern on the left sidebar to place it appropriately, then double click the pattern and add a few words:

To connect two rectangles by a line segment:

Ok, a simple arrangement is done:

Next is save, please export as.svg:

Open with VS Code (do not open with Notepad) :

Click on XML in the bottom right corner of the editor:

Input language mode is HTML (this is because the editor has no XML formatter by default, and some formatters add content) :

<style xmlns="http://www.w3.org/2000/svg" type="text/css" media="screen"> <! [CDATA[.svG-item {transition: 0.3s;}. Svg-item :hover{transform: translateY(-5px);}]]> </style>Copy the code

As follows:

Except for more
is the same as the familiar tag.

All points on an element rotate around their origin, which is 50%, 50% for an HTML element and 0, 0 for an SVG element on the SVG palette. Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source. Original: www.w3cplus.com/svg/transfo… © w3cplus.com

To add animations quickly, the following positive side expressions are available:

// js regular expression, [.+?] Matches any character more than once for lazy mode /(<rect x=.+? < g transform = "translate (0.5-0.5)" >. +? </g>)/gmsCopy the code

This regular expression matches the rectangle and the text inside it, that is, the

tag next to the

tag.

Replace with (where $1 is group 1) :

<g class="svg-item">$1</g>
Copy the code

It means another layer of g.vg -item.

This can be replaced with the positive side expression tool mentioned above:

A good local picture:

Matters needing attention

  1. The introduction method is as follows:

    <embed src="/static/img/xx.svg">
Copy the code

  2. It is best to remove the width and height attributes of SVG tags, because otherwise the size of the contained elements will be limited.

  3. It’s best not to use combinations because they might change the tag structure (if you know what’s going on, use them) :

  4. Pay attention to the hierarchy, the elements with dynamic effects should come first to prevent accidental occlusion of unrelated elements:

  5. Line segments can penetrate into the interior of the pattern, and it is best to avoid the following disconnection:

  6. Do not use Notepad to open and save, except to save source files (.drawio).

(after)