如何动态向HTML中插入SVG元素(包括Line,path,marker..等)

最新推荐文章于 2025-11-22 06:01:39 发布
原创 最新推荐文章于 2025-11-22 06:01:39 发布 · 8.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #svg

本文介绍如何使用JavaScript和jQuery动态地创建SVG元素，并将其插入到HTML文档中。具体步骤包括使用document.createElementNS创建SVG元素，设置元素属性，以及使用jQuery的append方法将其添加到指定位置。


1.使用dodument对象创建一个SVG元素marker，为元素引入svg的命名空间（必需引入命名空间，不然浏览器将此元素当做普通html标签插入文档流）

var marker = document.createElementNS("http://www.w3.org/2000/svg","marker");


2. 使用标签元素对象的setAttribute函数为元素的属性设值


marker.setAttribute("refx","2");
marker.setAttribute("refy","5");
marker.setAttribute("orient","auto");

3. 使用Jquery提供的append方法将新建的SVG元素marker插入父SVG元素中

$(父SVG元素).append(marker);


PS： 其他SVG元素的动态添加方法同上

关于d3.js绘制的树中g元素的拖动的功能实现
春夏秋冬bin的博客
03-08 4066
本人在做项目的时候，遇到了需要将d3.js绘制出来的树进行拖动的问题。1.先贴创建该树的源码//该树的结构 var treeData = [ { name: "原问题", description: "", _prototype: "_question", children: [] } ]; // ************** Generate the tr...
SVG精髓-svg开发指南
莫兮的博客
03-07 874
SVG精髓 目录 文章目录前言推荐阅读1. 入门1. 图形系统1. 栅格系统2. 矢量图形2. `SVG`作用1. 文档结构2. `circle`3. 指定样式 - `fill, stroke`4. 线 - `line`5. 变换坐标系统 - `use, transform, scale`6. 折线 - `polyline`7. `path`8. `text`2. 网页中使用`SVG`1. 常见的插入网页的方法1. ``2. `css`2. `SVG`作为应用程序3. 混合文档的`SVG`1. `svg`内
JS在HTML页面内动态创建SVG元素
MAILLIBIN的专栏
06-27 1万+
最近在学习数据可视化，深入了解了如何在网页上实现数据的动态可视化。比如D3.JS主要应用JS在HTML页面内动态生成SVG元素并绑定数据。以下是我的例程：<!DOCTYPE html> <HTML> <HEAD> <meta charset="utf-8"> <meta name="viewport" content="width=
js中使用SVG封装函数动态生成元素(vue)
yuansusu_的博客
03-22 962
使用SVG封装函数动态生成元素
SVGPath 项目安装和配置指南
gitblog_01282的博客
11-22 890
SVGPath 是一个用于 SVG 路径低级变换的工具包。它允许开发者对 SVG 路径数据进行各种变换操作，如缩放、平移、旋转等。该项目的主要编程语言是 JavaScript，适用于 Node.js 环境。 ## 2. 项目使用的关键技术和框架 SVGPath 项目主要使用了以下关键技术和框架： - **Node.js**: 一个基于 Chrome V8 引擎的 JavaScript 运行时
VUE3.0中使用SVG绘制折线箭头，并且添加线条流动动画
weixin_43996368的博客
03-10 7366
VUE3.0中使用SVG绘制折线箭头svg标签使用SVG 代码预定义形状元素defs 标签折线箭头绘制示例示例 svg标签使用 SVG 代码 SVG 代码包括开启标签 svg 和关闭标签 /svg 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。 <svg></svg> 预定义形状元素 SVG 有一些预定义的形状元素，可被开发者使用和操作： 矩形 rec
在Vue3.0里面动态创建svg(d3.js)
ouyangyiming的博客
09-28 1537
svg, d3
html 动态生成svg直线,SVG 动态添加元素与事件
weixin_39761491的博客
06-03 787
SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：SVG 快速入门svgDoc = document.getElementById("myS...
HTML5之SVG 2D入门8—文档结构及相关元素总结
09-28
例如，创建一个带有箭头的线段，可以定义一个`marker`元素，并通过`marker-start`、`marker-mid`和`marker-end`属性应用到`line`元素上。 SVG的灵活性和强大的功能使其成为创建高质量、可缩放的图形的理想选择。...
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 2819.666748046875 819.1666259765625" style="max-width: 100%;" class="flowchart" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-svg-0" height="100%"><style>#mermaid-svg-0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-0 .error-icon{fill:#552222;}#mermaid-svg-0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0 .marker.cross{stroke:#333333;}#mermaid-svg-0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0 p{margin:0;}#mermaid-svg-0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0 .cluster-label text{fill:#333;}#mermaid-svg-0 .cluster-label span{color:#333;}#mermaid-svg-0 .cluster-label span p{background-color:transparent;}#mermaid-svg-0 .label text,#mermaid-svg-0 span{fill:#333;color:#333;}#mermaid-svg-0 .node rect,#mermaid-svg-0 .node circle,#mermaid-svg-0 .node ellipse,#mermaid-svg-0 .node polygon,#mermaid-svg-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0 .rough-node .label text,#mermaid-svg-0 .node .label text,#mermaid-svg-0 .image-shape .label,#mermaid-svg-0 .icon-shape .label{text-anchor:middle;}#mermaid-svg-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-0 .rough-node .label,#mermaid-svg-0 .node .label,#mermaid-svg-0 .image-shape .label,#mermaid-svg-0 .icon-shape .label{text-align:center;}#mermaid-svg-0 .node.clickable{cursor:pointer;}#mermaid-svg-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-0 .arrowheadPath{fill:#333333;}#mermaid-svg-0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0 .edgeLabel p{background-color:rgba(15, 15, 15, 0.8);}#mermaid-svg-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(18, 18, 18, 0.8);}#mermaid-svg-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0 .cluster text{fill:#333;}#mermaid-svg-0 .cluster span{color:#333;}#mermaid-svg-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-0 rect.text{fill:none;stroke-width:0;}#mermaid-svg-0 .icon-shape,#mermaid-svg-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0 .icon-shape p,#mermaid-svg-0 .image-shape p{background-color:rgba(18, 18, 18, 0.8);padding:2px;}#mermaid-svg-0 .icon-shape rect,#mermaid-svg-0 .image-shape rect{opacity:0.5;background-color:rgba(19, 19, 19, 0.8);fill:rgba(14, 13, 13, 0.8);}#mermaid-svg-0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-svg-0_flowchart-v2-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-svg-0_flowchart-v2-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-svg-0_flowchart-v2-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-svg-0_flowchart-v2-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="mermaid-svg-0_flowchart-v2-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="mermaid-svg-0_flowchart-v2-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"><g data-look="classic" id="心理机制" class="cluster"><rect height="351.1666679382324" width="653" y="8" x="2158.6666717529297" style=""></rect><g transform="translate(2453.1666717529297, 8)" class="cluster-label"><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>心理机制</p></span></div></foreignObject></g></g><g data-look="classic" id="生理机制" class="cluster"><rect height="342" width="174" y="469.1666679382324" x="2637.6666717529297" style=""></rect><g transform="translate(2692.6666717529297, 469.1666679382324)" class="cluster-label"><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>生理机制</p></span></div></foreignObject></g></g></g><g class="edgePaths"><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_A_B_0" d="M132,343L136.167,343C140.333,343,148.667,343,156.333,343C164,343,171,343,174.5,343L178,343"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_B_C_0" d="M322,343L326.167,343C330.333,343,338.667,343,346.417,343.07C354.167,343.141,361.334,343.281,364.917,343.351L368.501,343.422"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_D_0" d="M481.072,368.928L490.727,374.801C500.381,380.674,519.691,392.42,534.179,398.294C548.667,404.167,558.333,404.167,563.167,404.167L568,404.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_X1_0" d="M457.462,294.462L471.052,257.052C484.642,219.642,511.821,144.821,543.91,107.41C576,70,613,70,648.667,70C684.333,70,718.667,70,754.556,70C790.444,70,827.889,70,866.667,70C905.444,70,945.556,70,992.111,70C1038.667,70,1091.667,70,1144.667,70C1197.667,70,1250.667,70,1305.167,70C1359.667,70,1415.667,70,1471.667,70C1527.667,70,1583.667,70,1636.833,70C1690,70,1740.333,70,1789.333,70C1838.333,70,1886,70,1925.167,70C1964.333,70,1995,70,2027,70C2059,70,2092.333,70,2114.5,70C2136.667,70,2147.667,70,2162.111,70C2176.556,70,2194.444,70,2203.389,70L2212.333,70"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_D_E_0" d="M728,404.167L732.167,404.167C736.333,404.167,744.667,404.167,752.417,404.237C760.167,404.307,767.334,404.448,770.917,404.518L774.501,404.588"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_E_F_0" d="M895.745,462.088L910.732,490.934C925.719,519.781,955.693,577.474,975.513,606.32C995.333,635.167,1005,635.167,1009.833,635.167L1014.667,635.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_E_X2_0" d="M896.622,348.122L911.463,320.629C926.303,293.137,955.985,238.152,997.326,210.659C1038.667,183.167,1091.667,183.167,1144.667,183.167C1197.667,183.167,1250.667,183.167,1305.167,183.167C1359.667,183.167,1415.667,183.167,1471.667,183.167C1527.667,183.167,1583.667,183.167,1636.833,183.167C1690,183.167,1740.333,183.167,1789.333,183.167C1838.333,183.167,1886,183.167,1925.167,183.167C1964.333,183.167,1995,183.167,2027,183.167C2059,183.167,2092.333,183.167,2114.5,183.167C2136.667,183.167,2147.667,183.167,2162.111,183.167C2176.556,183.167,2194.444,183.167,2203.389,183.167L2212.333,183.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_F_G_0" d="M1270.667,635.167L1276.167,635.167C1281.667,635.167,1292.667,635.167,1303.083,635.24C1313.5,635.313,1323.334,635.46,1328.25,635.534L1333.167,635.607"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_G_H_0" d="M1570.775,672.058L1582.257,676.243C1593.739,680.428,1616.703,688.797,1633.018,692.982C1649.333,697.167,1659,697.167,1663.833,697.167L1668.667,697.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_G_X3_0" d="M1555.549,584.049L1569.569,575.235C1583.588,566.422,1611.627,548.794,1650.814,539.98C1690,531.167,1740.333,531.167,1789.333,531.167C1838.333,531.167,1886,531.167,1925.167,531.167C1964.333,531.167,1995,531.167,2027,531.167C2059,531.167,2092.333,531.167,2114.5,531.167C2136.667,531.167,2147.667,531.167,2173.111,531.167C2198.556,531.167,2238.444,531.167,2278.333,531.167C2318.222,531.167,2358.111,531.167,2395.944,531.167C2433.778,531.167,2469.556,531.167,2505.333,531.167C2541.111,531.167,2576.889,531.167,2598.944,531.167C2621,531.167,2629.333,531.167,2637,531.167C2644.667,531.167,2651.667,531.167,2655.167,531.167L2658.667,531.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_H_I_0" d="M1801.761,670.167L1823.746,616.667C1845.73,563.167,1889.698,456.167,1915.266,402.737C1940.834,349.307,1948.001,349.448,1951.584,349.518L1955.167,349.588"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_I_J_0" d="M2060.35,382.483L2071.236,392.93C2082.122,403.378,2103.895,424.272,2120.281,434.719C2136.667,445.167,2147.667,445.167,2158.722,445.167C2169.778,445.167,2180.889,445.167,2186.444,445.167L2192,445.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_I_K_0" d="M2067.525,324.025L2077.215,317.882C2086.905,311.739,2106.286,299.453,2121.476,293.31C2136.667,287.167,2147.667,287.167,2162.111,287.167C2176.556,287.167,2194.444,287.167,2203.389,287.167L2212.333,287.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_K_L_0" d="M2340.333,308.409L2349.944,311.702C2359.556,314.995,2378.778,321.581,2401.843,339.533C2424.909,357.485,2451.818,386.803,2465.273,401.462L2478.727,416.121"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_L_L1_0" d="M2517.135,405.969L2533.057,349.668C2548.979,293.368,2580.823,180.767,2600.911,124.467C2621,68.167,2629.333,68.167,2639.685,69.66C2650.037,71.153,2662.408,74.139,2668.593,75.632L2674.778,77.125"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_L_L2_0" d="M2519.473,408.306L2535.005,365.45C2550.537,322.593,2581.602,236.88,2601.301,194.023C2621,151.167,2629.333,151.167,2638.078,153.377C2646.823,155.587,2655.979,160.007,2660.558,162.218L2665.136,164.428"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_L_L3_0" d="M2524.244,413.077L2538.981,386.759C2553.718,360.44,2583.192,307.803,2602.096,281.485C2621,255.167,2629.333,255.167,2639.733,258.176C2650.133,261.185,2662.599,267.203,2668.831,270.212L2675.064,273.221"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_L_L4_0" d="M2527.272,475.228L2541.504,494.884C2555.737,514.541,2584.202,553.854,2602.601,573.51C2621,593.167,2629.333,593.167,2638.078,595.377C2646.823,597.587,2655.979,602.007,2660.558,604.218L2665.136,606.428"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_H_M_0" d="M1864.917,670.167L1876.375,666C1887.833,661.833,1910.75,653.5,1937.542,649.333C1964.333,645.167,1995,645.167,2027,645.167C2059,645.167,2092.333,645.167,2114.5,645.167C2136.667,645.167,2147.667,645.167,2160.056,645.167C2172.444,645.167,2186.222,645.167,2193.111,645.167L2200,645.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_M_N_0" d="M2352.667,645.167L2360.222,645.167C2367.778,645.167,2382.889,645.167,2393.944,645.167C2405,645.167,2412,645.167,2415.5,645.167L2419,645.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_N_L4_0" d="M2587.667,645.167L2591.833,645.167C2596,645.167,2604.333,645.167,2612.667,645.167C2621,645.167,2629.333,645.167,2637.004,644.764C2644.675,644.361,2651.684,643.555,2655.188,643.153L2658.693,642.75"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_H_O_0" d="M1864.917,724.167L1876.375,728.333C1887.833,732.5,1910.75,740.833,1937.542,745C1964.333,749.167,1995,749.167,2027,749.167C2059,749.167,2092.333,749.167,2114.5,749.167C2136.667,749.167,2147.667,749.167,2156.667,749.167C2165.667,749.167,2172.667,749.167,2176.167,749.167L2179.667,749.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_O_P_0" d="M2373,749.167L2377.167,749.167C2381.333,749.167,2389.667,749.167,2398.056,749.167C2406.444,749.167,2414.889,749.167,2419.111,749.167L2423.333,749.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_P_X4_0" d="M2583.333,749.167L2588.222,749.167C2593.111,749.167,2602.889,749.167,2611.944,749.167C2621,749.167,2629.333,749.167,2637,749.167C2644.667,749.167,2651.667,749.167,2655.167,749.167L2658.667,749.167"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_K_L1_0" d="M2299.045,260.167L2315.537,238.667C2332.03,217.167,2365.015,174.167,2399.396,152.667C2433.778,131.167,2469.556,131.167,2505.333,131.167C2541.111,131.167,2576.889,131.167,2598.944,131.167C2621,131.167,2629.333,131.167,2639.733,128.158C2650.133,125.149,2662.599,119.131,2668.831,116.122L2675.064,113.113"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_K_L2_0" d="M2340.333,260.225L2349.944,256.049C2359.556,251.872,2378.778,243.519,2406.278,239.343C2433.778,235.167,2469.556,235.167,2505.333,235.167C2541.111,235.167,2576.889,235.167,2598.944,235.167C2621,235.167,2629.333,235.167,2638.078,232.957C2646.823,230.746,2655.979,226.326,2660.558,224.116L2665.136,221.906"></path><path marker-end="url(#mermaid-svg-0_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_K_L3_0" d="M2340.333,298.047L2349.944,299.734C2359.556,301.42,2378.778,304.793,2406.278,306.48C2433.778,308.167,2469.556,308.167,2505.333,308.167C2541.111,308.167,2576.889,308.167,2598.944,308.167C2621,308.167,2629.333,308.167,2639.672,307.386C2650.011,306.606,2662.354,305.045,2668.526,304.265L2674.698,303.485"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(539, 404.1666679382324)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>是</p></span></div></foreignObject></g></g><g transform="translate(1303.6666717529297, 70)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>否</p></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(985.6666717529297, 635.1666679382324)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>是</p></span></div></foreignObject></g></g><g transform="translate(1639.6666717529297, 183.16666793823242)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>否</p></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(1639.6666717529297, 697.1666679382324)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>是</p></span></div></foreignObject></g></g><g transform="translate(2125.6666717529297, 531.1666679382324)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>否</p></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(2125.6666717529297, 445.1666679382324)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>是</p></span></div></foreignObject></g></g><g transform="translate(2125.6666717529297, 287.1666679382324)" class="edgeLabel"><g transform="translate(-8, -12)" class="label"><foreignObject height="24" width="16"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>否</p></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(70, 343)" id="flowchart-A-0" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>外部信息</p></span></div></foreignObject></g></g><g transform="translate(252, 343)" id="flowchart-B-1" class="node default"><rect height="54" width="140" y="-27" x="-70" style="" class="basic label-container"></rect><g transform="translate(-40, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="80"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>注意与感知</p></span></div></foreignObject></g></g><g transform="translate(439, 343)" id="flowchart-C-3" class="node default"><polygon transform="translate(-67,67)" class="label-container" points="67,0 134,-67 67,-134 0,-67"></polygon><g transform="translate(-40, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="80"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>成功编码？</p></span></div></foreignObject></g></g><g transform="translate(650, 404.1666679382324)" id="flowchart-D-5" class="node default"><rect height="54" width="156" y="-27" x="-78" style="" class="basic label-container"></rect><g transform="translate(-48, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="96"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>形成短期记忆</p></span></div></foreignObject></g></g><g transform="translate(2278.333335876465, 70)" id="flowchart-X1-7" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>编码失败</p></span></div></foreignObject></g></g><g transform="translate(865.3333358764648, 404.1666679382324)" id="flowchart-E-9" class="node default"><polygon transform="translate(-87.33333587646484,87.33333587646484)" class="label-container" points="87.33333587646484,0 174.6666717529297,-87.33333587646484 87.33333587646484,-174.6666717529297 0,-87.33333587646484"></polygon><g transform="translate(-60.333335876464844, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="120.66667175292969"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>复述/深度加工？</p></span></div></foreignObject></g></g><g transform="translate(1144.6666717529297, 635.1666679382324)" id="flowchart-F-11" class="node default"><rect height="54" width="252" y="-27" x="-126" style="" class="basic label-container"></rect><g transform="translate(-96, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="192"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>巩固过程开始：海马体活跃</p></span></div></foreignObject></g></g><g transform="translate(2278.333335876465, 183.16666793823242)" id="flowchart-X2-13" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>短期衰退</p></span></div></foreignObject></g></g><g transform="translate(1471.6666717529297, 635.1666679382324)" id="flowchart-G-15" class="node default"><polygon transform="translate(-135,135)" class="label-container" points="135,0 270,-135 135,-270 0,-135"></polygon><g transform="translate(-96, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="192"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>巩固成功？<br/>（睡眠、无干扰、无损伤）</p></span></div></foreignObject></g></g><g transform="translate(1790.6666717529297, 697.1666679382324)" id="flowchart-H-17" class="node default"><rect height="54" width="236" y="-27" x="-118" style="" class="basic label-container"></rect><g transform="translate(-88, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="176"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>长期记忆存储于大脑皮层</p></span></div></foreignObject></g></g><g transform="translate(2724.6666717529297, 531.1666679382324)" id="flowchart-X3-19" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>巩固失败</p></span></div></foreignObject></g></g><g transform="translate(2025.6666717529297, 349.1666679382324)" id="flowchart-I-21" class="node default"><polygon transform="translate(-67,67)" class="label-container" points="67,0 134,-67 67,-134 0,-67"></polygon><g transform="translate(-40, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="80"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>有效提取？</p></span></div></foreignObject></g></g><g transform="translate(2278.333335876465, 445.1666679382324)" id="flowchart-J-23" class="node default"><rect height="54" width="164.6666717529297" y="-27" x="-82.33333587646484" style="" class="basic label-container"></rect><g transform="translate(-52.333335876464844, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="104.66667175292969"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>成功回忆/再认</p></span></div></foreignObject></g></g><g transform="translate(2278.333335876465, 287.1666679382324)" id="flowchart-K-25" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>提取失败</p></span></div></foreignObject></g></g><g transform="translate(2505.333335876465, 445.1666679382324)" id="flowchart-L-27" class="node default"><polygon transform="translate(-51,51)" class="label-container" points="51,0 102,-51 51,-102 0,-51"></polygon><g transform="translate(-24, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="48"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>原因？</p></span></div></foreignObject></g></g><g transform="translate(2724.6666717529297, 89.16666793823242)" id="flowchart-L1-29" class="node default"><rect height="54" width="92" y="-27" x="-46" style="" class="basic label-container"></rect><g transform="translate(-16, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="32"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>干扰</p></span></div></foreignObject></g></g><g transform="translate(2724.6666717529297, 193.16666793823242)" id="flowchart-L2-31" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>线索缺失</p></span></div></foreignObject></g></g><g transform="translate(2724.6666717529297, 297.1666679382324)" id="flowchart-L3-33" class="node default"><rect height="54" width="92" y="-27" x="-46" style="" class="basic label-container"></rect><g transform="translate(-16, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="32"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>压抑</p></span></div></foreignObject></g></g><g transform="translate(2724.6666717529297, 635.1666679382324)" id="flowchart-L4-35" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>痕迹弱化</p></span></div></foreignObject></g></g><g transform="translate(2278.333335876465, 645.1666679382324)" id="flowchart-M-37" class="node default"><rect height="54" width="148.6666717529297" y="-27" x="-74.33333587646484" style="" class="basic label-container"></rect><g transform="translate(-44.333335876464844, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="88.66667175292969"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>时间/不使用</p></span></div></foreignObject></g></g><g transform="translate(2505.333335876465, 645.1666679382324)" id="flowchart-N-38" class="node default"><rect height="54" width="164.6666717529297" y="-27" x="-82.33333587646484" style="" class="basic label-container"></rect><g transform="translate(-52.333335876464844, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="104.66667175292969"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>突触消退/修剪</p></span></div></foreignObject></g></g><g transform="translate(2278.333335876465, 749.1666679382324)" id="flowchart-O-41" class="node default"><rect height="54" width="189.33334350585938" y="-27" x="-94.66667175292969" style="" class="basic label-container"></rect><g transform="translate(-64.66667175292969, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="129.33334350585938"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>脑损伤/疾病/老化</p></span></div></foreignObject></g></g><g transform="translate(2505.333335876465, 749.1666679382324)" id="flowchart-P-42" class="node default"><rect height="54" width="156" y="-27" x="-78" style="" class="basic label-container"></rect><g transform="translate(-48, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="96"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>神经结构破坏</p></span></div></foreignObject></g></g><g transform="translate(2724.6666717529297, 749.1666679382324)" id="flowchart-X4-43" class="node default"><rect height="54" width="124" y="-27" x="-62" style="" class="basic label-container"></rect><g transform="translate(-32, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="64"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>存储破坏</p></span></div></foreignObject></g></g></g></g></g></svg> 帮我修改成主色为蓝色 黑色箭头 心理机制和生理机制用浅灰色
07-12
要修改SVG图表的颜色样式，包括主色、箭头颜色以及特定区域的填充色，可以直接编辑SVG代码中的相关属性。以下是如何实现这些更改的具体方法： 1. **修改主色**：可以通过设置`fill`属性来更改SVG元素的主色调。例如...
使用D3.js创建物流地图的示例代码
10-18
接下来，定义SVG的尺寸，并在SVG中添加三个不同的图形分组（g元素）：`gmp`用于背景地图和起点标记，`mline`用于物流线路和目标点，`button`用于测试按钮。 ```javascript var width = 1000, height = 800; var svg...
js实现的带笔锋手写签名
03-13
index.html是签名板直接显示的版本 dialog是签名板用对话框显示的版本
SVG 形状元素（rect、circle、ellipse、line、polyline、polygon、path）
热门推荐
司马懿的西山居
11-25 1万+
SVG有一些预定义的形状元素 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 矩形 <rect> <rect> 用于创建 矩形 和 圆角矩形 （x，y）是矩形左上角坐标，默认是（0，0） （width，height）是矩形的宽度和高度 （rx，ry）是矩形圆角的水平半径和垂直半径 <s
svg中path贝塞尔曲线和圆弧图文详解
晴空闲云
10-15 1万+
最近研究了一下svg的path标签，功能非常强大，理论上来讲path标签可以画出任意图形。自己记性不太好，记录一下path的使用语法和自己的理解。 path介绍 path用d属性来描述路径，语法格式大概如下： <svg> <path d="路径描述" /> </svg> 其中路径描述包含如下命令： M = moveto 移动到某点。 L = lineto 画一条直线到某点。 H = horizontal lineto 画一条水平线到某点。 V = vertical l
d3.select('body').append('svg').attr('width', 200).attr('height', 200)这段代码中.attr()添加的元素为什么作用于svg上而不是...
weixin_42613017的博客
12-31 181
在这段代码中，.attr() 方法是作用于 svg 上的，而不是 body 上的。这是因为在代码中，通过使用 d3.select(body).append(svg) 先选择了 body 元素，然后调用 .append(svg) 方法将一个新的 svg 元素添加到了 body 中，并将其赋值给了变量 svg。然后，.attr() 方法是作用于这个新创建的 svg 元素上的，设置了它的 width 和...
SVG图片在HTML页面中的四种加载方法
大剑师兰特的GIS世界
11-20 6875
SVG因为体积小，矢量图的缘故，经常会在html页面中引用此种格式的图形。这里有四种引用加载的形式。
前端学习之HTML/标签/重点标签(上)
笑桐笔记的博客
05-18 523
了解HTML锚点 HTML 标签 重点标签 HTML列表 概念   <a>元素(或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。但严格来说，<a>元素不是一个链接，而是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话，可以作为原本链接位置的占位符，常用于home链接   注意：任何文档流内容都可以被嵌套，只要不是交互内容类别(如按钮、链接等) 属性 href   href属..
HTML5(八)——SVG 之 path 详解
前端人的博客
08-09 6027
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。 一、path 路径详解 1.1、path 命令 path 用于定义一个路径，其中命令就是控制这条路径的，以下命令就是可用于路径数据： 注：以上所有命令大小写都可以，区别是大写命令表示绝对定位
svg 蒙版(mask)和剪切(clipPath)学习
黄彪博客
01-12 1351
文章目录clipPath 剪切mask 蒙版 clipPath 剪切 clipPath 剪切路径范围内是显示的，否则是不显示的 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 定义一个clipPath，值为moon --> <clipPath id=...
svgjs defs 如何存放元素
最新发布
11-30
<think> 首先，用户的问题是关于使用svg.js库时，如何在defs中存放元素。用户引用了几个站内引用，我需要基于这些引用来回答。 关键引用： - 引用[1]：提到创建SVG容器使用 `var draw = SVG();` - 引用[2]：讨论SVG的web编辑，包括使用defs元素，如 `<defs><filter id="f1">`。还提到了在JavaScript中操作SVG。 - 引用[3]：展示了如何创建SVG根元素：`var svgRoot = SVG('box-workarea').size('100%','100%').id('svgroot')` - 引用[4]：详细描述了如何在defs中创建marker元素，例如 `<defs><marker id="markerCircle">` 我的回答需要结构化、清晰，并帮助用户逐步解决问题。既然用户指定了中文回答，我必须用中文。 系统指令： - 所有行内数学表达式用$...$，但这里可能不需要，因为问题是关于SVG的，不是数学。 - 独立公式用$$...$$，同样可能不适用。 - LaTeX语法正确 – 确保代码块正确显示。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识，例如[^1]。 用户的问题： "我想查找在 svgjs 的 defs 中存放元素的方法，请问svgjs 中 defs 存放元素的方法" 所以，我需要解释在svg.js中如何将元素添加到defs中。 从引用中提取关键点： - defs元素用于定义可重用的元素，如滤镜、标记等。 - 在svg.js中，我们可以使用库的方法来创建和添加元素。 回忆svg.js的API： - svg.js 是一个用于操作SVG的JavaScript库。 - 要添加元素到defs，通常需要： 1. 获取或创建defs元素。 2. 创建新元素（如filter、marker等）。 3. 将新元素添加到defs中。 从引用[4]，我们看到一个例子：在defs中使用marker元素。 在svg.js中，类似的操作可以通过方法实现。 步骤： 1. 首先，创建SVG容器。 2. 然后，访问或创建defs元素。svg.js可能有方法直接操作defs。 3. 创建元素（如filter、marker）并添加到defs。 参考svg.js文档： - 我知道svg.js有`defs()`方法来获取或创建defs元素。 - 然后，可以使用`add()`或特定元素创建方法。 例如： - `draw.defs().add(element);` 在引用[3]中，有 `var svgRoot = SVG('box-workarea').size('100%','100%').id('svgroot')`。这类似于创建容器。 构建回答： - 逐步解释。 - 确保代码示例正确。 - 添加引用标识。 结构回答： 1. 介绍：解释defs在SVG中的作用。 2. 步骤： a. 创建SVG容器。 b. 获取或创建defs元素。 c. 创建新元素（如filter、marker）。 d. 添加到defs中。 3. 代码示例。 4. 生成相关问题。 引用标识： - 在相关部分添加 [^1], [^2] 等。 例如： - 引用[2]讨论了defs和filter。 - 引用[4]讨论了marker在defs中。 所以，在解释时自然地添加。 最终回答： - 用中文。 - 清晰结构。 </think> ### SVG.js 中在 defs 中存放元素的方法 在 SVG.js 中，`defs` 元素用于存放可重用的定义（如滤镜、标记、渐变等），这些定义不会直接显示在画布上，但可以通过引用在其他地方使用[^2][^4]。以下我将逐步解释如何在 SVG.js 中操作 `defs` 元素，包括创建、添加和引用元素。方法基于 SVG.js 的 API 和您提供的引用内容。 #### 步骤详解 1. **创建 SVG 容器** 首先，需要创建一个 SVG 容器作为根元素。这可以通过 `SVG()` 方法实现。例如，创建一个 ID 为 `box-workarea` 的容器[^1][^3]： ```javascript import { SVG } from '@svgdotjs/svg.js'; // 创建 SVG 容器 const draw = SVG().addTo('#box-workarea').size('100%', '100%').id('svgroot'); ``` 这里，`addTo('#box-workarea')` 将 SVG 添加到页面的指定元素中，`size('100%', '100%')` 设置尺寸，`id('svgroot')` 分配 ID[^3]。 2. **获取或创建 defs 元素** SVG.js 提供了 `defs()` 方法来获取或创建 `defs` 元素。如果容器中没有 `defs`，它会自动创建；如果已存在，则返回现有对象[^4]。 ```javascript // 获取或创建 defs 元素 const defs = draw.defs(); ``` 这样，`defs` 就成为了一个可操作的对象，用于存放可重用元素。 3. **创建并添加元素到 defs** 接下来，创建需要存放的元素（如滤镜、标记等），并使用 `add()` 方法将其添加到 `defs` 中。以下是几个常见元素的示例： - **添加滤镜元素（filter）**：引用[2]中展示了 SVG 原生滤镜定义，在 SVG.js 中可以类似创建[^2]。 ```javascript // 创建滤镜元素 const filter = defs.filter('f1', (add) => { add.offset('offOut', 'SourceAlpha', 20, 20); // 偏移效果 add.gaussianBlur('blurOut', 'offOut', 10); // 高斯模糊 add.blend('SourceGraphic', 'blurOut', 'normal'); // 混合模式 }).attr('width', '200%').attr('height', '200%'); // 设置滤镜尺寸 // 在图形中引用滤镜 const rect = draw.rect(100, 100).attr({ fill: 'yellow', stroke: 'green' }); rect.filterWith(filter); // 应用滤镜 ``` 这里，`filter()` 方法创建滤镜，`attr()` 设置属性，`filterWith()` 将滤镜应用到图形上[^2]。 - **添加标记元素（marker）**：引用[4]演示了在 `defs` 中创建标记（marker），SVG.js 支持类似操作[^4]。 ```javascript // 创建标记元素 const markerCircle = defs.marker(5, 5, (add) => { add.circle(5).move(5, 5).attr({ fill: '#000000', stroke: 'none' }); // 创建圆形标记 }).id('markerCircle').size(8, 8).ref(5, 5); // 设置标记属性 // 在路径中引用标记 const path = draw.path('M100,10 L150,10 L150,60') .attr({ stroke: '#6666ff', 'stroke-width': 1, fill: 'none' }) .marker('start', markerCircle); // 在路径起点应用标记 ``` 使用 `marker()` 方法创建标记，`id()` 分配 ID，`ref()` 设置参考点，`marker('start', markerCircle)` 引用标记[^4]。 4. **保存和重用元素** 所有添加到 `defs` 的元素会自动保存，并可通过 ID 或对象引用在其他地方重用。例如： ```javascript // 通过 ID 引用 defs 中的元素 const myFilter = defs.findOne('#f1'); // 查找已存在的滤镜 if (myFilter) { const newRect = draw.rect(50, 50).attr({ fill: 'blue' }); newRect.filterWith(myFilter); // 重用滤镜 } ``` `findOne()` 方法用于检索 `defs` 中的元素，确保高效重用[^4]。 #### 完整代码示例 以下是一个完整示例，展示在 SVG.js 中创建容器、添加元素到 `defs`，并在画布中引用： ```javascript import { SVG } from '@svgdotjs/svg.js'; // 1. 创建 SVG 容器 const draw = SVG().addTo('#box-workarea').size(800, 600); // 2. 获取或创建 defs const defs = draw.defs(); // 3. 添加滤镜到 defs const filter = defs.filter('myFilter', (add) => { add.offset('offOut', 'SourceAlpha', 10, 10); add.gaussianBlur('blurOut', 'offOut', 5); }).attr('width', '150%').attr('height', '150%'); // 4. 添加标记到 defs const marker = defs.marker(10, 5, (add) => { add.path('M0,0 L10,5 L0,10 Z').attr({ fill: '#FF0000' }); }).id('arrowMarker').size(10, 10).ref(2, 5); // 5. 在画布上创建图形并引用 defs 元素 const rect = draw.rect(100, 100).attr({ fill: 'green' }).move(50, 50).filterWith(filter); const line = draw.line(200, 50, 300, 150).attr({ stroke: '#0000FF', 'stroke-width': 2 }) .marker('end', marker); // 在路径终点应用标记 // 输出 defs 内容（可选，用于调试） console.log(defs.children()); // 显示 defs 中的所有元素 ``` #### 注意事项 - **性能优化**：将可重用元素（如复杂滤镜或标记）放入 `defs` 可以减少重复代码，提升渲染性能[^2][^4]。 - **错误处理**：确保元素 ID 唯一，避免冲突；使用 `defs.findOne()` 检索元素时，检查返回值是否为 null。 - **兼容性**：SVG.js 的 API 与原生 SVG 语法兼容，引用[4]中的原生示例可以轻松转换为 SVG.js 代码[^4]。 通过以上步骤，您可以在 SVG.js 中高效地管理和重用 `defs` 元素。如需更高级操作（如动态更新或事件处理），建议参考 [SVG.js 官方文档](https://svgjs.dev/docs/3.0/)。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值