如何向网页添加 SVG

最新推荐文章于 2025-03-23 19:50:47 发布
最新推荐文章于 2025-03-23 19:50:47 发布 · 649 阅读 · 0
文章标签：

#xhtml #javascript #ViewUI

本主题介绍了在网页中呈现 SVG 的常见方法，并假定你已掌握有关 HTML 和 JavaScript 的基础知识。

简介

如果你只了解可缩放矢量图形 (SVG)，并希望体验 SVG，则你首先需要解决的问题之一是如何向基本网页添加 SVG。 如果你看一下相对基本的网页模板，便可获知如何开始执行此操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>My First SVG Page</title>
</head>

<body>
  <p>SVG to be inserted here.</p>
</body>

</html>

可通过多种方法向此基本模板添加 SVG。下面的示例演示了一种直接执行此操作的方法。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
  <title> My First SVG Page</title>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="200px">
    <rect x="0" y="0" width="100%" height="100%"
          fill="none" stroke="black"/>
    <circle cx="100" cy="100" r="50"
            style="stroke: black; fill: red;"/>
  </svg>
</body>

</html>

提示 为提高现代浏览器之间的兼容性，请将上述示例代码以 xhtml 文件扩展名保存。通过将文件扩展名从html 更改为 xhtml，可有效地将模板从 HTML 文档转换为 XHTML 文档。这就是为何添加 xml 声明（上一示例中的第一行）并注释掉 meta 元素的原因。有关上一示例的更多详细信息，请参见以下列表。

<?xml version="1.0" encoding="utf-8" standalone="no"?>

xml 声明是一个将文档标识为 XML/XHMTL 的浏览器处理指令。所需的版本特性会指定 XML 文档将遵循的 XML 标准的版本。可选encoding 特性会指示浏览器如何基于特定字符集解释文档的关联字节（默认编码为 UTF-8）。可选 standalone="no" 特性指示在DOCTYPE 元素中指定的文档类型定义 (DTD) 将不只是用于验证。请注意，实际上无需指定 standalone=”no”。存在外部标记声明（此示例中为 DTD）时会假定standalone=”no” 值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

从技术上来说，DOCTYPE 声明不是 HTML 元素。此声明是对 Web 浏览器的说明，它介绍了写入页面的标记语言版本。请注意，此声明指用于指定标记语言规则的 DTD，以便浏览器可以正确呈现内容。DOCTYPE 还允许你使用页面验证程序。在此示例中，XHTML 1.0 Transitional DTD 启用了所有 HTML 元素和特性，包括表象元素和弃用的元素（例如 <font>）。但不允许框架，并且必须将标记编写为格式正确的 XML。

<html xmlns="http://www.w3.org/1999/xhtml">

html 元素会告知浏览器，这是一个普通意义上的 HTML 文档，具体而言，它是由DOCTYPE 指示的 XHTML 文档。xmlns 特性指定 XHTML 文档的 XML 命名空间。通常，开发人员在编写 XHTML 文档时应显式包括 XHTML xmlns 声明。

<head>

利用网页的 head 部分，可以定义页标题、提供搜索引擎信息、设置页位置、添加样式表、编写脚本等。 （例如base、link、meta、script 和 style）。

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

meta 元素提供有关文档的元数据。 元数据是有关文档内容的信息（对读者不可见）。此元数据可供浏览器或其他软件（例如，搜索引擎、文档管理系统等）使用。第一个模板（不具有svg 元素）中的内容特性指定，在服务器传送实际页面内容之前，应先使用名为 Content-Type（其值为 text/html; charset=utf-8）的 HTTP 标头来提供页面（从 Web 服务器到客户端）。利用此过程，浏览器可使用正确的字符编码 (charset=utf-8) 来正常呈现传入页数据 (text/html)。第二个 XHTML (SVG) 示例中注释掉了meta 元素，因为 XML/XHML 文档中已忽略使用 meta 元素指定字符编码，并且必须将其转换为 xml 声明。开发人员可在对 HTML 使用 meta 元素与对 XML/XHTML 使用 xml 声明之间进行切换。

<title>

通常，title 元素会在浏览器的选项卡中呈现其关联文本。

</head>

head 的结束元素。

<body>

body 元素是显示的 XHTML 文档的内容的容器。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">

svg 元素定义了 SVG 文档片断。xmlns 特性定义了 SVG 片断的命名空间。version 特性指示此文档片断遵循的 SVG 语言版本，width 和height 特性定义 SVG 视区的大小（此示例中为 200 x 200 像素方形）。

<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>

SVG rect 元素会从视区的左上角或点 (0, 0) 处开始绘制一个具有最大宽度和高度的黑色矩形，该矩形与 SVG 视区相对。此定位勾勒了给定 SVG 视区的轮廓。

<circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/>

类似地，SVG circle 元素会绘制一个带黑色边框的红色圆圈，其半径为 50 像素。该圆圈位于 200 x 200 像素的 SVG 视区的中心位置。

</svg>

svg 的结束元素。

</body>

body 的结束元素。

</html>

html 的结束元素。

SVG 的呈现方法

还可使用其他方法来呈现 SVG。下表总结了这些方法。

方法建议文件扩展名所需的浏览器优点和缺点
内联 HTML5.html本地支持 HTML5 中内联 SVG 的浏览器，例如 Windows Internet Explorer 9。

优点：可充分利用 HTML5 构造。

缺点：可能需要为不支持 HTML5 中的内联 SVG 的浏览器实现回调代码。
内联 XHTML.xhtml本地支持 SVG 的浏览器，例如 Internet Explorer 9。

优点：许多浏览器当前都支持基于 XHTML 的内联 SVG。

缺点：无法利用 HTML5 构造。
独立.svg本地支持 SVG 的浏览器，例如 Internet Explorer 9。

优点：可使用“嵌入”方法轻松嵌入现有内容中。

缺点：无法利用所有 HTML/XHTML 构造。
嵌入.xhtml本地支持 SVG 的浏览器，例如 Internet Explorer 9。

优点：通过使用嵌入，使得实现和回调行为变得相对简单。

缺点：为嵌入页中的 SVG 内容编写脚本可能会比较困难。另外，一些浏览器可能不支持所有形式的嵌入，例如，通过 img 元素或通过 CSSbackground-image 样式引用 SVG。
插件.html可能本地支持、也可能不本地支持 SVG 的浏览器。

优点：浏览器无需本地支持 SVG。统一各个浏览器间的 SVG 行为。

优点：插件可能会导致浏览器不稳定，W3C SVG 规范可能会过时，和/或插件提供者不再为插件提供支持（如 Adobe SVG Viewer 插件的情况）。

注意 Windows Internet Explorer 8 不本地支持 SVG，从而需要插件来呈现 SVG。但通过实现适当的回调代码（如本主题稍后所述），你可能不需要 SVG 插件。

下一部分描述了上述五种方法的示例。

内联 HTML5

下面的示例演示了一个基本内联 HTML5 SVG 模板。此代码示例会在 SVG 标记中创建一个圆圈并注册单击事件。单击该圆圈时，其大小会发生更改。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <script>

    function doCircle(evt) 
    {
      var theCircle = evt.target;
      var radius = theCircle.getAttribute("r");

      if (radius == 50) 
      {
        radius = 75;
      }
      else 
      {
        radius = 50;
      }
    
      theCircle.setAttribute("r",radius);
    }

  </script>
</head>

<body>
  <svg width="300px" height="300px">
    <text x="25" y="50" font-size="24">SVG Circle Element</text>
    <text x="25" y="275">Click the circle to change its size.</text>
    <circle cx="125" cy="150" r="50" 
            fill="pink" stroke="green" stroke-width="5"
            οnclick="doCircle(evt)" />
  </svg>
</body>

</html>

<!DOCTYPE html> 元素告知浏览器这是一个 HTML5 文档。 <meta http-equiv="X-UA-Compatible" content="IE=9"/> 元素用于将 Windows Internet Explorer 强制为 IE9 标准模式，以便能在 Intranet 网站上正确呈现。请注意，无法对 HTML5 应用html 元素的 xmlns="http://www.w3.org/1999/xhtml" 特性。

提示 如上表所建议，以 html 文件扩展名保存此示例。

注意 对于 HTML5，SVG 内容默认情况下溢出，而在 XHTML 中它是隐藏的。

内联 XHTML

由于 SVG 基于 XML，因此可使用正确的命名空间向 XHTML 文档添加 SVG，如以下基本内联 XHTML 模板中所示。

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Manipulating the Radius of an SVG Circle</title>
  <script language="javascript" type="text/javascript">
  <![CDATA[  
    var red_circle;  // The object representing circle.
  var r;       // The variable representing circle's radius.
    
    window.onload = function() {
      red_circle = document.getElementById('redCircle');
      r = red_circle.getAttribute("r");
    }
    
    function grow() {
      r = 2*r;
      red_circle.setAttribute("r",r);
    }
    
    function shrink() {
      r = r/2;
      red_circle.setAttribute("r",r);
    }
  ]]>
  </script>
</head>

<body>
  <svg width="200px" height="200px" version="1.1" 
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle id="redCircle" cx="100" cy="100" r="50" 
            style="stroke: black; fill: red;" 
            οnmοuseοver="grow()" οnmοuseοut="shrink()"/>
    <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black;"/>
  </svg>
</body>

</html>

此代码示例将创建一个 200 x 200 像素的视区，并绘制一个带黑色边框的红色圆圈，其半径为 50px。如果你将鼠标指针移至所呈现的圆圈上方，则圆圈的半径将增大一倍；如果你将鼠标指针从所呈现的圆圈上移开，则圆圈的当前半径将减少一半。矩形元素用于勾勒视区的边界。

提示 所上表所建议，以 xhtml 文件扩展名保存此示例。

内联 XHTML 能正常工作，但需要 xhtml 文件扩展名和命名空间。在最近 HTML5 出现之前，内联 XHTML 是最佳选择。

独立 SVG

SVG 原本旨在通过使用 svg 文件扩展名来提供矢量图形文件格式。下面的示例演示了一个基本独立 SVG 模板。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     οnclick="doSomething(evt)">

  
  <script language="javascript" type="text/javascript">
  <![CDATA[

    function doSomething(evt) 
    {
      var myRect = evt.target;
  
      if (myRect.id != "redRect") 
      {
        alert("Please click on the rectangle");
        document.location.reload();
      }
  
      var myWidth = myRect.getAttribute("width");
      
      if (myWidth == 50)
        myRect.setAttribute("width", 100);
      else
        myRect.setAttribute("width", 50);
    }
   
  ]]>
  </script>

  <!-- Outline the SVG viewport. -->
  <rect x="0" y="0" width="100%" height="100%" 
        style="fill: none; stroke: black; stroke-width: 5px;" /> 
  
  <rect id="redRect" x="100" y="100" width="50" height="50" 
        fill="red" stroke="blue" />
    
</svg>

此代码示例通过每个内部单击来交替实现对红色矩形的扩大和缩小。如果在红色矩形外部单击，则会出现警告并重新加载页面。

如前所述，模板的 xml 元素（第一行）中的 standalone="no" 特性指示，DOCTYPE 元素中指定的 DTD 将不只是用于验证。你无需指定standalone=”no”，因为当存在外部标记声明（此示例中为 DTD）时会假定此值。

提示 如上表所建议，以 svg 扩展名保存此示例。

嵌入

可根据浏览器的不同，使用 iframe、embed、object 和 img 元素以及 CSS background-image 样式将 SVG 嵌入网页中。请注意，并非所有这些嵌入方法都可用于特定浏览器。下面的示例演示了基本 SVG 模板，该模板使用object 元素。

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>  
  <title>Embedding SVG</title>
</head>

<body>
  <h1>Embedding SVG in an XHTML Document</h1>
  <p>Embedding the file <em>standAlone.svg</em> using the <strong>object</strong> 
     element:</p>
  <object data="standAlone.svg" width="302px" height="302px" type="image/svg+xml">
    <img src="standAlone.png" alt="PNG image of standAlone.svg" />
  </object>
</body>

</html>

提示 如上表所建议，以 xhtml 文件扩展名保存此示例。还需注意的是，嵌入 SVG 文件（此示例中为standAlone.svg）必须具有 svg 文件扩展名。

假定 SVG 文件不是通过 img 元素嵌入的，也不是作为 CSS 背景嵌入的，嵌入 SVG 文件通常具有自己的编程方式，但除非嵌入 SVG 文件来自与嵌入页相同的域，否则嵌入不会提供用于在嵌入 SVG 文档和嵌入 HTML 文档之间进行可编程交互的简便方法。通常，在网页中对 SVG 进行编程时，建议不使用此方法，但此方法可用于轻松插入 SVG 文件，并对在早期浏览器（例如，本地不支持 SVG 的 Internet Explorer 8）中进行回调很有用。

注意 由于某些浏览器无法支持所有形式的 SVG 嵌入，因此请务必在所有目标浏览器间进行测试。

插件

以下列表中列出了为何不建议使用插件解决方案的几个原因：

  • Adobe 不再支持主要 SVG 浏览器插件 Adobe SVG Viewer。
  • 大多数现代浏览器都本地支持 SVG。
  • 第三方插件可能会导致浏览器不稳定，或者插件提供者不再为其提供支持。

摘要

下表概括了本主题中查看的模板。

方法模板建议文件扩展名建议服务器 MIME 类型
内联 HTML5 
<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="X-UA-Compatible" 
         content="IE=9"/>
    <style>
    </style>
    <script>
    </script>
  </head>
  
  <body>
  .
  .
  .
    <svg width="120" height="90">

      <!-- SVG markup here. -->

    </svg>
  .
  .
  .
  </body>

</html>
.htmltext/html
内联 XHTML 
<?xml version="1.0"?>
<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <script language="javascript" type="text/javascript">   
  <![CDATA[
  ]]>
  </script>  
</head>
<body>
.
.
. 
  <svg width="120px" height="90px" version="1.1" 
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- SVG markup here. -->

  </svg>
.
.
.
</body>

</html>
.xhtmlapplication/xhtml+xml
独立
XML 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     
  <!-- SVG markup here. -->
      
</svg>
.svgimage/svg+xml
嵌入 
<?xml version="1.0"?>
<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Embedding SVG</title>
</head>

<body>
  <h1>Embedding SVG in an XHTML Document</h1>
  <p>Embedding the file <em>standAlone.svg</em>  
     using the <strong>object</strong> element:</p>
  <object data="standAlone.svg" type="image/svg+xml"
          width="302px" height="302px">
    <!-- Implement fallback code here, or display a message: -->
    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>
  </object>
</body>

</html>
.xhtml、.htmltext/html
插件不推荐。.html不推荐。

注意 Microsoft Internet 信息服务 (IIS) 的默认配置不为使用 .svg 文件扩展名的文件提供服务。为了从 IIS 请求 .svg 网页，你必须将 .svg 的 "MIME 类型"映射添加到image/svg+xml。

对于本地支持 SVG 和 HTML5 的浏览器，最好选择内联 HTML5 方法。

对于不完全支持 HTML5 但本地支持 SVG 的浏览器，请使用内联 XHTML 或独立方法，其次是嵌入方法（如果适用）。

对于不本地支持 SVG 的浏览器，建议实现相应的回调措施（例如，呈现 SVG 图形的静态图像）。

使用 <meta http-equiv="X-UA-Compatible" content="IE=9"/> 为 HTML 应用程序 (HTA) 启用可缩放矢量图形 (SVG)。有关详细信息，请参阅HTML 应用程序 (HTA) 简介。

相关主题

如何使用 SVG 进行缩放和平移 SVG SVG 参考

iteye_3606
关注
网页中SVG图片的显示方法
07-18
例如，通过DOM操作和事件监听，可以用JS改变SVG元素的颜色、大小或添加动画效果。以下是一个示例，点击SVG矩形时将其颜色变为蓝色： SVG在现代Web开发中非常重要，它不仅可缩放性强，还与CSS、JavaScript无缝集成，...
四川省各市、县、区及街镇网页版SVG图
12-20
网页版SVG图的提供，为这些行政单位的地理信息展示提供了新的可能。 SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以用来描述二维矢量图形、矢量/栅格图的混合图形以及文字。这种格式的图形...
如何在网页中使用SVG图形？
WXLink的博客
09-09 1755
SVG作为一种强大的图形格式，已经成为现代网页设计的重要组成部分。无论是简单的图形展示，复杂的动画效果，还是与用户交互的动态效果，SVG都提供了无与伦比的灵活性和强大功能。它不仅能提升网页的美观性，更能在用户体验上带来显著的提升。如果您还没开始使用SVG，现在就尝试在您的网页中加入SVG图形吧，你会发现无穷的乐趣和可能性！来源锦匠网页。
在HTML中插入SVG的几种方式
般若
04-15 3万+
SVG (Scalable Vector Graphics) 可缩放矢量图，是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。 插入svg标签 直接使用 <svg> 标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。 一个简单的圆： <svg widt...
网页中使用 SVG
Code Writers
12-20 1900
技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~如果你还知道其他方法，可以在评论区补充~在写本文时，我推荐使用 内嵌到 HTML 的方式来做日常开发。其他方式按照你实际需求去使用即可。最后的 embed 和 object 这两种方式可以当做备用方案去使用。
2.网页中使用SVG
五石之瓠 以为大樽 浮于江湖 悠笑人生
10-11 2993
Chapter2. Using SVG in Web Pages 约翰多恩说过，没有人是一座孤岛。同样，SVG 也不是孤立存在的。您可以查看 SVG 图像本身，作为一个独立的文件在您的 web 浏览器或 SVG 查看器中查看。本书中的许多例子都是以这种方式进行的。但是在其他例子中，你将想让你的图像集成到一个大的文档中，而这个文档包含了文本段落，表格，或者其他不能够单独通过使用 SVG 展示的内容。这章``描述了各种方法，用于将 SVG 集成到 HTML 或者其他类型的文档中。 图2-1 显示了上一章节绘制出
网页中加载 SVG 的七大方式
m0_72030584的博客
11-18 3008
不同的svg加载方式会影响页面的性能、可维护性和兼容性，本文讲述了多种svg的加载方式。
河南省各市、县区及街镇的网页版SVG文件
01-20
SVG文件还支持动画和滤镜效果，这意味着开发者可以为地图添加动态效果，如地区间的渐变显示、用户交互时的颜色变化等，增强用户的视觉体验和交互趣味。 在实际应用中，这些SVG文件可以用于创建河南省的行政区划图、...
导出打印嵌套svg网页
02-25
在IT行业中，网页的呈现和导出经常遇到各种挑战，特别是在处理SVG（可缩放矢量图形）元素时。本文将深入探讨“导出打印嵌套SVG网页”的主题，包括如何将网页转换为canvas，解决网页导出为PNG图片的问题，以及如何...
SVG的基本使用方法
scc0413的博客
07-03 4532
SVG的使用方法
svg添加不同效果的提示信息
05-22
SVG 意为可缩放矢量图形（Scalable Vector Graphics）,SVG 使用 XML 格式定义图像,因此使用常规的DOM对象是无法展示在SVG对象里面的，需要处理如提示信息。
这篇文章能让你吃透SVG
pythonxiaopeng的博客
11-11 665
VG转换在SVG图像中创建的形状。例如，移动，缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。 一、转换简单示例 例： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" tr
将SVG 图引入到HTML页面
热门推荐
马优晨
11-04 5万+
将SVG图引入到HTML网页，目前只有三种办法，前两种很相似，第三种更简单。下来介绍一下这是那种方法。第一种：使用<embed>标签： 这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的HTML标准里还没有这个标签。<embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspa
Github 热点项目 star-vector AI矢量神器来了！文本或图片直接转化为SVG
最新发布
opentrending的博客
03-23 1790
它特别擅长处理图标、技术图表、LOGO等图形的精准矢量化，即使是没有设计基础的人也能轻松生成可无限放大的矢量图形。课程通过10个循序渐进的单元，系统讲解构建智能助手所需的核心技术，包含工具调用、多代理协作、可信系统设计等实战场景。项目提供了丰富的应用案例，包括客户支持、投资分析、法律助手等多个领域，并结合了OpenAI、Anthropic、Gemini等不同模型。平台整合了多模态AI能力，开箱即用无需复杂配置，既能满足SAAS化部署需求，也支持私有化定制开发，帮助各行业轻松实现AI场景落地。
svg之ViewBox详解
子非渔
03-20 1万+
先来看一下svg的格式： <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="layer1" xmlns="...
SVG基础知识 Adobe Illustrator绘制SVG
weixin_34290000的博客
10-12 817
SVG svg在线编辑器 editor.method.ac/ 多边形 使用的是polygon标签 该标签能创建含有不少于三个边的图形。 如下 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <polygon points="0,10 5,2 5,7 10,0"/> </svg>...
新手快速入手微信公众号加入svg代码块
xing_628的博客
07-03 7718
在浏览器空白处鼠标右键/检查，打开调试工具，定位到代码位置文字，右击鼠标选择Edit as HTML。公众号中嵌入svg能让文章有更丰富的交互，简单来说就是能让文章有点击动画或者是矢量图。可以在这里分享和交流，如果你在此上传作品，有几率被发现和使用，赚取一点点“睡后收入”没关系，来介绍另外一种更加简单的方法，但需要一点麻烦的前置。以下网站有非常详细的介绍，相信凭借你的能力，结合例子带你快速入门。本文会让你快速对这项技术有个了解，并快速的进入简单的上手。删除原有代码，把内容替换为我们的SVG代码。
回顾HTML与CSS之二——多媒体与嵌入
aaxin_666的博客
01-17 341
怎么将一个图片放到网上 我们可以用 元素来把图片放到网页上。它是一个空元素（它不需要包含文本内容或闭合标签），最少只需要一个 src （一般读作其全称 source）来使其生效。src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对URL，就像 元素的 href 属性一样 &amp;lt;img src=&quot;https://www.example.com/images/dinosaur.jp...
Github每日精选（第37期）：零依赖的简单、响应式、现代 SVG 图表frappe-charts
haleycat的博客
09-07 300
它们有趣的原因之一是因为所涉及的数据通常涉及大量数据点。对于这么多点，我们真的希望尽可能地保持情节的细节，同时也利用已经存在的颜色来发挥优势。这意味着我们可以通过只允许几个周期性标签来减少渲染每个 X 标签的冗余。面积图源自折线图，通过标记 X 轴和折线图之间的区域。是一个零依赖的简单、响应式、现代 SVG 图表，通过简单的几句话就能快速的生成我们需要的图表。显示值渐变的一种微妙方法是随着值的大小呈现颜色变化。当显示两个数据点之间的线性斜率不合适的某些数据时，您可以使用该spline属性。...
实用的SVG网页加载图标动画特效
根据给定文件信息，我们需要详细介绍有关SVG网页加载图标特效的知识点，包括SVG技术的基础、SVG动画的实现以及如何在网页中应用和优化SVG图标。 SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于描述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值