Tag:svg

  • Svg basics of HTML5 + SVG Learning Guide

    Time:2022-2-15

    Baidu Encyclopedia: Svg scalable vector graphics is a graphics format based on extensible markup language (XML), which is used to describe two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format formulated by W3C, and it is also the network vector graphics standard in the specification. Svg strictly follows XML syntax and uses descriptive […]

  • W3C tutorial (16): other W3C activities

    Time:2022-1-13

    This section provides an overview of other important and interesting W3C activities.This section provides an overview of other important and interesting W3C activities. Web Accessibility Initiative (WAI) Wai defines guidelines on how to make web content easier for people with disabilities.Wai strives for the goal of “web accessibility for all” through technology, guidelines, tools, education, […]

  • Deeply analyze the usage of viewbox attribute when HTML5 uses SVG images

    Time:2021-12-5

    Quickly understand the parameters of viewbox The viewbox property is used to specify the origin and size of the coordinate system of the user’s SVG image. All the content drawn in SVG is completed relative to this coordinate system. Because the SVG canvas is infinitely extended in all directions, you can even draw graphics outside […]

  • In depth analysis of SVG in HTML5

    Time:2021-11-15

    Svg background SVG is the abbreviation of scalable vector graphics, which means scalable vector graphics. In 1998, the World Wide Web Consortium established a working group to develop a technology to represent vector graphics through XML – SVG! Because SVG is also an XML file, SVG also inherits the advantages of openness, portability and interactivity […]

  • CSS animation works with SVG to create energy flow effect

    Time:2021-10-8

    The final effect is as follows: The animation is divided into two steps Formulate operation track Create Dom and animate by track Formulate operation track We first draw a light blue translucent road force at the bottom as a channel for energy flowThe path of SVG is used here (in fact, the background image can […]

  • Introduction to SVG vector graphics drawing using HTML5

    Time:2021-9-10

    VG represents scalable vector graphics, which is a language used to describe 2D graphics. Graphics applications are written in XML, and then XML is presented by SVG reader program. SVG is mainly used for vector charts, such as pie charts, two-dimensional charts in X and Y coordinate systems, etc. Svg became a W3C recommendation on […]

  • Examples explain the method of using SVG to make loading animation

    Time:2021-7-16

    Today, I’d like to share with you a loading animation based on SVG images. Now mobile web pages are used more often. If you still use GIF to do loading images, the image quality may be affected. So SVG is a good way. The code in this exhibition is written by Aurer. The front-end staff […]

  • Svg + CSS or JS to make the animation effect of tick

    Time:2021-7-5

    Before the boss let do a login can show a hook effect, baidu life and death search can’t see today in the B station to see a video actually has according to the demand to improve, nonsense, don’t say more, first see the effect! HTML code <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> < title […]

  • Example code of B station charging effect realized by CSS + svg

    Time:2021-6-2

      difficulty Two mask making of SVG graphics Code first This is the pink box on the left There’s nothing to say about this <div id=”con”> <div id=”TA-con”> <div id=”text-con”> <div id=”linght”></div> < div id = “Ta” > charging for TA < / div > </div> </div> body { margin: 0; padding: 0; background-color: #eee; […]

  • Using SVG to realize the function of prompt box

    Time:2020-7-7

    NO.1 preface Tooltips are often referred to asPrompt box (or information prompt box)The prompt box can provide users with corresponding prompt information with strong interactivity and degree of freedom. Today we’re not going to talk about how to achieve powerful interaction, but to see how to restore their visual effects in the best way, and […]

  • Introduction to SVG path tracing animation using CSS3

    Time:2020-3-30

    Do not rely on JavaScript, directly use pure CSS implementationsvgDraw the animation effect of the stroke, the effect shows the animation. Basic knowledge: There is an important attribute branch in SVGstroke, which is called “edge tracing” in Chinese software. The properties related to stroke are as follows: 1、 strokeIndicates the stroke color. The name of […]

  • Using SVG symbols to build a complete guide to icon system

    Time:2020-3-24

    From the initial use of img pictures to the later use of CSS sprite to reduce server requests, to the popular graphic Font Icon iconcont. Now, a new way of using icons has become popular – SVG symbols. Working principle How SVG symbols work: the symbol element is used to define a graphic template object, […]