如何在JavaScript中导入SVG文件

如何在JavaScript中导入SVG文件

在本文中,我们将看到和使用使用SVG(可缩放矢量图形)的不同方法。

方法 1: 使用HTML<img>元素的最快方式。

语法:

<img src='logo.svg' alt="some file"  height='100' width='100' style="color:green;"/>
HTML

通过<img>元素嵌入SVG,你需要:

  • src 属性
  • height 属性(如果你的SVG没有固有的长宽比)
  • width 属性(如果你的SVG没有固有的长宽比)

    优点:

  • 简单快捷的实现。

  • 通过嵌套<img><a> HTML元素,将SVG图像变成超链接。
  • 缓存SVG文件,从而减少加载时间。

    缺点:

  • 无法对SVG文件进行操作。

  • 只能使用内联CSS来设置SVG样式。
  • 无法使用CSS伪类来设置SVG样式。

    示例:

<!DOCTYPE html>
<html lang="en">
  <body>
    <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png" alt="gfg-logo" height="100" width="100" style="background-color: green"/>
  </body>
</html>
HTML

输出:

如何在JavaScript中导入SVG文件

使用HTML<img>元素的SVG文件

方法 2: 使用SVG作为<object>

语法:

<object type="image/svg+xml" data="logo.svg" class="logo">
  Logo
</object>
HTML

通过<object>元素嵌入SVG需要:

  • type 属性
  • data 属性
  • class 属性(如果使用外部/内部CSS

    优点:

  • 可以使用外部/内部CSS来设置SVG样式。

  • 实现简单快捷。
  • 与缓存非常搭配。

    缺点:

  • 使用外部样式表时,需在SVG文件内部使用<style>元素。

  • 对语法和实现不太熟悉。

    HTML代码:

<!DOCTYPE html>
<html lang="en">
<body>
  <object type="image/svg+xml" data="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png" class="logo">
    GFG Logo
  </object>
</body>
</html>
HTML

CSS代码: 以下是上述代码中使用的“styles.css”文件的内容。

.logo {
  height: 100;
  width: 100;
}
HTML

输出:

如何在JavaScript中导入SVG文件

使用HTML<object>元素的SVG文件

方法: 使用<iframe>嵌入SVG

语法:

<iframe src="logo.svg" width="500" height="500">

</iframe>
HTML

通过<iframe>元素嵌入SVG需要

  • src 属性
  • height属性(如果SVG没有固有的长宽比)
  • width属性(如果SVG没有固有的长宽比)

Pros(优点):

  • 快速且易于实现。
  • <object>元素相同。

Cons(缺点):

  • 无法使用JavaScript操纵SVG。
  • 缓存效果不佳。

HTML代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <iframe
      src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png"
      width="150"
      height="150">
    </iframe>
  </body>
</html>
HTML

Output(输出):

如何在JavaScript中导入SVG文件

阅读更多:JavaScript 教程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册