如何向您的网页添加可扩展矢量图形 (SVG)


SVG 的英文全称是可扩展矢量图形,它是一种用于描述 XML 中的 2D 图形和图形应用程序的语言,其中 XML 由 SVG 浏览器呈现。大多数网络浏览器都能像展示 PNG、GIF 和 JPG 那样展示 SVG。

注意:如果您已有 SVG 文件,请使用 <img> <object> 或 <embed> 标记进行添加。

要向网页添加 SVG,请使用 <svg> 元素。通过此元素,您可以轻松地在 HTML5 中嵌入 SVG −

您可以尝试运行以下代码,将可扩展矢量图形 (SVG) 添加到网页中

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG</title>
   </head>

   <body>
      <h2 align="center">HTML5 SVG Circle</h2>
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <circle id="bluecircle" cx="60" cy="60" r="50" fill="blue" />
      </svg>
   </body>
</html>

上次更新日期:2020 年 6 月 26 日

176 次浏览

开启你的 职业生涯

完成课程,获得认证

开始吧
广告
© . All rights reserved.