Front end will know will learn | SVG see this article is enough (12)

This is the 17th day of my participation in the August More text Challenge. For details, see:August is more challenging

This is the SVG series directory:

• Front end will know will learn | SVG see this article is enough (a)
• Front end will know will learn | SVG see this article is enough (2)
• Front end will know will learn | SVG see this article is enough (3)
• Front end will know will learn | SVG see this article is enough (4)
• Front end will know will learn | SVG see this article is enough (5)
• Front end will know will learn | SVG see this article is enough (6)
• Front end will know will learn | SVG see this article is enough (7)
• Front end will know will learn | SVG see this article is enough (8)
• Front end will know will learn | SVG see this article is enough (9)
• Front end will know will learn | SVG see this article is enough (10)
• Front end will know will learn | SVG see this article is enough (11)

preface

SVG can be customized to import image files (JPGE, PNG), and JavaScript can be used to manipulate SVG. Make our SVG richer.

image

The image tag is used to insert an image file into an SVG canvas. Here is an example of inserting an image into a canvas.

<! -- image -->
<svg width="200" height="200">
    <image xlink:href="./img/pic.jpg" x="0" y="0" height="50px" width="50px"></image>
</svg>
<! -- img -->
<img src="./img/pic.jpg" alt="pic">
Copy the code

Img uses the SRC attribute to import the image file, while the image tag requires xlink:href to import the image file. In image you also need to specify some attributes that control the image tag.

Javascript operations SVG

If the SVG code is written directly in an HTML web page, it becomes part of the web DOM and can be manipulated directly with the DOM.

Let’s look at this example:

<svg width="200" height="200">
    <rect id="myRect" x="10" y="10" width="50" height="50" fill="red"></rect>
</svg>
<script>
    const myRectDom = document.getElementById('myRect')
    myRectDom.addEventListener('click'.(e) = > {
        myRectDom.setAttribute('width'.80);
        myRectDom.setAttribute('height'.80);
    }, false);
</script>
<style>
    #myRect {
        transition: all 1s;
    }
</style>
Copy the code

In the example above, when we click on the rectangle, the width and height of the rectangle change from 50*50 to 80*80.

We first bind an ID value to the rect tag and get the tag (DOM) in JavaScript. Bind the rect tag to a click event. When the rect tag is clicked, use the setAttribute attribute to set the width and height to 80. To have a transition effect, I added an animation to the rect, which is Transition: all 1s; This line of code.

The last

This article describes SVG using the image tag and an example of using JavaScript to manipulate SVG. Thank you for reading!

😀😀 Pay attention to me, don’t get lost! 😀 😀