Introduction to using SVG and SVG predefined shape elements in HTML
If the svg code is in html, it is easier for us to write javascript to control the transformation of graphics. Here we introduce some predefined shape elements of svg. Friends who are interested can refer to it. I hope it will be helpful to everyone. .
SVG files can be embedded in HTML documents using the following tags:
<embed src="rect.svg" width="300"height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
pluginspage attribute points to the URL to download the plug-in.
<object data="rect.svg"width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/"/> <iframe src="rect.svg" width="300"height="100"> </iframe>
Among the three,
If the svg code is in html, it is easier for us to write javascript to control the transformation of the graphics:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Rectangle
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" onclick="ccc();"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:yellow"/> <ellipse cx="220" cy="100" rx="190" ry="20" id="w1" style="fill:white"/> </svg>
Line
<script type="text/javascript"> function ccc(){ var a = document.getElementById("w1"); a.style.fill="red"; a.setAttribute("cx", "150"); //设置值 a.setAttribute("ry", "50"); //设置值 } </script>
Path
The above is the entire content of this chapter. For more related tutorials, please visit
Html5 video tutorial
,
SVG video tutorial
!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use SVG to achieve image mosaic effect without using Javascript? The following article will give you a detailed understanding, I hope it will be helpful to you!

svg can be converted to jpg format by using image processing software, using online conversion tools, and using the Python image processing library. Detailed introduction: 1. Image processing software includes Adobe Illustrator, Inkscape and GIMP; 2. Online conversion tools include CloudConvert, Zamzar, Online Convert, etc.; 3. Python image processing library, etc.

svg images are widely used in projects. The following article will introduce how to use svg icons in vue3 + vite. I hope it will be helpful to everyone!

Basic Java types (boolean, byte, char, short, int, long, float and double) and the keyword void are also represented as Class objects through the class attribute; booleanisPrimitive() in the Class class: determines whether the specified Class object represents a basic type. Static TYPE fields of wrapper classes and Void classes; Integer.TYPE==int.class;Integer.class==int.class; Class instance objects of array types: Classclz=String[].class; Clas of arrays

With the continuous development of modern Web front-end development, more and more technologies are widely used in actual development. Among them, Vue.js is currently one of the most popular JavaScript frameworks. It is based on the MVVM model and provides a rich API and component library, making it easier to develop responsive, reusable, and efficient web applications. The latest version of Vue.js3 has better performance and richer features than the old version, which has attracted widespread attention and research. This article will introduce to you a

How to add logo to favicon using SVG? The following article will introduce to you how to use SVG to generate favicon with logo. I hope it will be helpful to you!

1. Install svg-sprite-loadernpminstallsvg-sprite-loader--save-dev 2. Create a new component under src/components/svgIcon index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon", props:{iconClass:{type:String},className:{type:String},},setup

To draw HTMLImageElements on a canvas element, use the drawImage() method. This method defines an Image variable using src="mySVG.svg" and uses drawImage when loading. varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";
