Home >Web Front-end >Front-end Q&A >What to do if css svg is not displayed?
What to do if css svg is not displayed?
- 藏色散人Original
- 2021-01-04 10:48:005225browse
css svg does not display solutions: 1. Use the d8e2720730be5ddc9c2a3782839e8eb6 tag to import the svg file; 2. Use the 273238ce9338fbb04bee6997e5552b95 tag to import the svg file; 3. Use the d5ba1642137c3f32f4f4493ae923989c tag to import the svg document.
The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.
Recommended: "css video tutorial"
When html introduces svg files but they are not displayed, it may be because svg is not supported by all browsers, firefox, chrome support, ie Some lower versions do not support it.
Solution:
Use the d8e2720730be5ddc9c2a3782839e8eb6 tag
d8e2720730be5ddc9c2a3782839e8eb6 tag is supported by all major browsers Supports and allows scripting. [Recommended: html online manual]
Note: Using the d8e2720730be5ddc9c2a3782839e8eb6 tag when embedding SVG in an HTML page is the method recommended by Adobe SVG Viewer! However, if you need to create valid XHTML, you cannot use d8e2720730be5ddc9c2a3782839e8eb6. There is no d8e2720730be5ddc9c2a3782839e8eb6 tag in any HTML specification.
For example: (You need to download Adobe's svg viewer plug-in to display)
<embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
Use the 273238ce9338fbb04bee6997e5552b95 tag
It is the standard of HTML 4 tag, supported by all newer browsers. The disadvantage is that it does not allow scripting.
Note: If you have the latest version of Adobe SVG Viewer installed, SVG files will not work when using the 273238ce9338fbb04bee6997e5552b95 tag (at least not in IE)!
<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
Use the d5ba1642137c3f32f4f4493ae923989c tag
Thed5ba1642137c3f32f4f4493ae923989c tag works in most browsers.
For example:
<iframe src="rect.svg" width="300" height="100"></iframe>
Then in rect.svg, by referencing the SVG namespace, you can add SVG elements to the HTML code, like this (this requires a browser Support svg, such as firefox, chrome):
<html xmlns:svg="http://www.w3.org/2000/svg"> <body> <p>This is an HTML paragraph</p> <svg:svg width="300" height="100" version="1.1" > <svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg:svg> </body> </html>
The above is the detailed content of What to do if css svg is not displayed?. For more information, please follow other related articles on the PHP Chinese website!