Svg pitfalls in webview: webviewsvg

Source: Internet
Author: User

Svg pitfalls in webview: webviewsvg

This section does not detail how to draw svg images. It is a small bug.

In this figure, the image with textures and radians is originally directly split into a png image, but because it is registered on the homepage of the app login, so this 35 K image will have a significant impact on the display effect of the home page, which takes time. How can this problem be solved?

Then, cut the subsequent texture into a GIF image and use it as the background image repeat. Then the texture is OK. What about the radians? Is it still a cut chart?

NO! NO! NO!

We can use svg to draw a simple image with the following White rectangular groove using svg.

<Svg id = "svg" class = "svg-path" width = "200" height = "50">
<Path d = "M0 2 C90 20 100 20 200 2 L200 50 L0 50 Z" stroke = "# fff" fill = "# fff"> This can indeed be drawn as svg, but the configured width and height are given px values. How can we make them fit the screen size of different mobile phones?
Because we have always used svg images in the project, we naturally think of making svg images as background images.
Is it necessary for the UI Designer to generate svg images? In fact, this place is not needed. Since we have already drawn it, it can be like the following,
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" x = "0" y = "0" viewBox = "0 0 200 50"> <path d = "M0 2 C90 20 100 20 200 2 L200 50 L0 50 Z "stroke =" # f00 "fill =" # f00 "> although width: 100%. However, there will be a background color of 1px on both sides of the browser. Although the width calculated on the browser is PX, this is a small defect.
Then I thought, there are two solutions:
1. width: 101%; margin-left:-1px; this is a patch solution. However, this will cause the page to slide a little left or right.
2. Naturally, it may be caused by stroke-width of the path of the drawn svg. It was originally set to 1px. When it is set to 2px, the above problem will not occur.
However, I still don't understand why it works. I hope you can give me more advice.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.