当html引入svg文件却不显示为何，能否列举一些解决方案？

当html引入svg文件却不显示，可能由于svg不是所有浏览器都支持，firefox, chrome支持，ie有的低版本不支持。

解决方案：

<embed>标签被所有主流的浏览器支持，并允许使用脚本。

当在 HTML 页面中嵌入 SVG 时使用 <embed>标签是 Adobe SVG Viewer 推荐的方法，然而，如果需要创建合法的 XHTML，就不能使用 <embed>。

任何 HTML 规范中都没有 <embed>标签。

例如：需要下载adobe的svg viewer插件来显示。

<embed src="rect.svg" width="300" height="100"

type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

即

scalable

vector

graphics，是一种用来绘制矢量图的

html5

标签。你只需定义好xml属性，就能获得一致的图像元素。

使用svg之前先将标签加入到html

body中。就像其他的html标签一样，你可以为svg标签为之添加id属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。svg标签跟其它的html标签有通用的属性。你可以用height="100px"

width="200px"

为其添加高度和宽度。

现在就将svg元素加入到我们html代码中，svg提供很多绘图形状，例如线条、圆、多边形等。

svg线条：

svg线条用标签定义，在此标签内你还可以定义其他的属性。

该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。

svg画圆：

svg提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为mycircle。为了定义圆的中心以及半径，使用cx="55"

cy="55"以及r="50"属性分别定义。使用fill="#219e3e"为圆填充颜色。同样你可以用stroke="#17301d"

stroke-width="2"定义圆周线条颜色和宽度。

svg矩形:

同样的使用标签来画矩形，我们同样设置了

id

属性

“myrectangle”

,用

width="300"

height="100"

定义高宽，使用

fills

属性定义填充颜色。用

strock

定义边框。还有一点需要注意，我用

fill-opacity="0.5"

stroke-opacity="0.5"

为

stroke

和

filling

都添加了透明度。

svg椭圆：

我们同样是用标签来绘制椭圆。设置其

id="myellipse"

，给定起中心坐标

cx="120"cy="60"，长轴短轴半径

rx="100"

ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3f5208stroke:blackstroke-width:3"。

svg多边形：

我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如

points="10,10

75,150

150,60"

，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用

style="fill:#63bcf7stroke:blackstroke-width:3"

定义多边形填充颜色、边框以及边框宽度。