如何向网页添加 SVG

最新推荐文章于 2024-05-13 01:02:10 发布
最新推荐文章于 2024-05-13 01:02:10 发布
阅读量1w 收藏 6
点赞数 1
分类专栏： SVG WEB前端 SVG编程之道
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luqin1988/article/details/8478022
版权
SVG 同时被 3 个专栏收录
48 篇文章 2 订阅
订阅专栏
WEB前端
44 篇文章 0 订阅
订阅专栏
SVG编程之道
36 篇文章 18 订阅
订阅专栏

本主题介绍了在网页中呈现 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 参考

云淡风清-北京
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG基础用法
͏⁠͏͏⁠͏ ͏⁠͏
05-16 7944
SVG基础用法
网页中使用 SVG
Code Writers
12-20 1622
技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~如果你还知道其他方法，可以在评论区补充~在写本文时，我推荐使用 内嵌到 HTML 的方式来做日常开发。其他方式按照你实际需求去使用即可。最后的 embed 和 object 这两种方式可以当做备用方案去使用。
2024年前端最全小白详解Vue3项目中怎么引入 SVG 图标_vue3 svg，2024年最新作为一名web前端面试者你应该知道的知识
最新发布
2401_84617731的博客
05-13 1051
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
【html】svg标签
weixin_46590928的博客
11-18 1200
SVG是是用来制作矢量图的 HTML5 标签，用来定义 SVG 图形的容器。
springboot之restfulcrud--抽取公共页&链接高亮切换
level_Tiller的博客
09-27 199
<li class="nav-item"> <a class="nav-link" th:href="@{/emps}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="current...
SVG添加购物车按钮动画特效特效代码
03-20
在网页设计中，SVG（Scalable Vector Graphics）是一种用于绘制矢量图形的标记语言，它支持交互性和动画效果，可以提供高质量的图形显示，并且文件大小相对较小。本示例中的“SVG添加购物车按钮动画特效”是利用CSS3...
导出打印嵌套svg网页
02-25
在IT行业中，网页的呈现和导出经常遇到各种挑战，特别是在处理SVG（可缩放矢量图形）元素时。本文将深入探讨“导出打印嵌套SVG网页”的主题，包括如何将网页转换为canvas，解决网页导出为PNG图片的问题，以及如何...
SVG网页加载图标特效特效代码
03-20
3. **JavaScript与SVG交互**：通过JavaScript库如Snap.svg或d3.js，可以对SVG元素进行更复杂的操作，如动态添加、删除元素，改变属性值，甚至实现交互式动画。 4. **事件监听**：通过JavaScript监听网页加载状态，...
CSS3 SVG网页沙漏加载动画特效
11-05
在现代网页设计中，动态加载效果是提升用户体验的重要手段之一，而"CSS3 SVG网页沙漏加载动画特效"就是一种独特且吸引人的视觉表现形式。本文将深入探讨这个主题，介绍CSS3和SVG如何结合创建出这样的动画效果，并...
css3 svg网页底部波浪特效
07-24
在网页设计领域，CSS3和SVG的结合使用可以创造出各种引人入胜的视觉效果，其中底部波浪特效就是一种常见的动态设计元素。这个特效能够为网页增添生动性，提升用户体验，尤其适用于海洋、沙滩或者自然主题的网站设计...
Spring家族的思维导图（高清PNG+SVG）
05-21
Spring家族的思维导图（高清PNG+SVG）
网页引入svg图片的4种方式
晴空闲云
10-11 3万+
web应用开发使用svg图片，总结了下，可以有如下4种方式： 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。
svg中如何让文本溢出时显示省略号
xm2by的博客
11-27 5207
svg中如何让文本溢出时显示省略号 最近在使用d3.js实现一个树状组织结构图，遇到如下图所示的问题，要求是文本内容固宽，溢出内容应用省略号代替，如果是使用普通html标签实现的话，是比较简单的，overflow: hidden; text-overflow: ellipsis; white-space: nowrap;即可，但是在使用svg标签进行作图时，将这些css属性应用到<text&...
css-spring、svg-spring
snowball的博客
09-11 265
一、spring技术 1.1，传统的spring，图标图形整合在一起，实际呈现的时候准确显示特定图标。 1.2，这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。 二、iconfont iconfont-阿里巴巴矢量图标库 官网了解一下，大致情况就是上传、下载这么简单； 下载后的文件包括这么多，既包括项目常用的css文件，也有我们svp-spring想要的js文件 三、基于iconfont的css-spring/fontclass 3.1，引入css文件 3.2.
Springboot与前端图片交互（二）
qq_34830247的博客
05-05 1092
Springboot与前端图片交互（二） 开发需求：将文件的地址放到数据库中 前面我用的是直接在在磁盘中进行存储，没有和数据库进行交互。如果文件直接在磁盘上存储，当存储量较大的时候往往会造成资源混乱，不容易管理。因此可以采用将文件放入到磁盘中，将文件的地址放入到数据库中，访问文件的时候只需要从数据库中拿到地址就可以访问。 前端和**Springboot与前端图片交互（一）**一样 服务端 为了方便...
小程序的开发之使用SVG
qq_40665861的博客
01-29 7963
昨天突然提出要在小程序中使用SVG，因为我们的小程序项目是有主题色的。不同的主题色时有些图片一直是固定的，显的有些格格不入，所以打算使用SVG来实现根据主题色的颜色进行变化。 什么是SVG SVG是”Scalable Vector Graphics”的简称。中文可以理解成“可缩放矢量图形”。是一个基于XML的图形描述语言。它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。 SVG有哪些优势 与其他图像格式相比，使用SVG的优势在于： SV
HTML5如何使用SVG
热门推荐
聚风阁
01-05 4万+
代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势： SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情...
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图添加局部点击事件
04-05
要在SVG图上添加局部点击事件，您需要使用JavaScript。以下是一个简单的例子： 1. 首先，在SVG代码中为要添加点击事件的元素添加一个唯一的ID。例如，假设您的SVG代码如下： ```html <svg width="100" height="100...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值