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

最新推荐文章于 2025-05-17 11:49:02 发布
最新推荐文章于 2025-05-17 11:49:02 发布
阅读量8.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端，HTML SVG 文章标签： html svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/junzhen_chen/article/details/70242060
本文介绍如何使用JavaScript和jQuery动态地创建SVG元素，并将其插入到HTML文档中。具体步骤包括使用document.createElementNS创建SVG元素，设置元素属性，以及使用jQuery的append方法将其添加到指定位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


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元素的动态添加方法同上

在Vue3.0里面动态创建svg(d3.js)
ouyangyiming的博客
09-28 1473
svg, d3
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=
SVG标记的艺术：如何有效使用markerUnits和orient属性
weixin_30299319的博客
05-17 282
本篇博客详细探讨了SVG标记（marker）的高级使用方法，包括如何通过markerUnits属性控制标记大小，避免使用百分比长度，以及如何通过orient属性实现标记的方向自适应。同时，文章还分析了不同浏览器对这些属性的支持情况，并对未来SVG标记功能的发展进行了展望。
js中使用SVG封装函数动态生成元素(vue)
yuansusu_的博客
03-22 930
使用SVG封装函数动态生成元素
html 动态生成svg直线,SVG 动态添加元素与事件
weixin_39761491的博客
06-03 754
SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：SVG 快速入门svgDoc = document.getElementById("myS...
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
HTML5之SVG 2D入门8—文档结构及相关元素总结
09-28
例如，创建一个带有箭头的线段，可以定义一个`marker`元素，并通过`marker-start`、`marker-mid`和`marker-end`属性应用到`line`元素上。 SVG的灵活性和强大的功能使其成为创建高质量、可缩放的图形的理想选择。...
SVG直线line 与折线polyline
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
12-25 1559
这意味着你可以轻松地应用CSS样式规则来改变它们的颜色、透明度、阴影效果等，甚至可以通过JavaScript动态调整这些属性，以响应用户的交互行为或页面状态的变化。在日常工作中，不断探索新的技术和方法，勇于尝试创新的设计理念，才能在这个快速发展的领域中保持竞争力。此外，结合事件监听器，还可以实现用户交互功能，例如点击、悬停时触发特定的动作，从而提升用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。元素组合在一起，形成一个更复杂的图案。
关于d3.js绘制的树中g元素的拖动的功能实现
春夏秋冬bin的博客
03-08 4022
本人在做项目的时候，遇到了需要将d3.js绘制出来的树进行拖动的问题。1.先贴创建该树的源码//该树的结构 var treeData = [ { name: "原问题", description: "", _prototype: "_question", children: [] } ]; // ************** Generate the tr...
<?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.select('body').append('svg').attr('width', 200).attr('height', 200)这段代码中.attr()添加的元素为什么作用于svg上而不是...
weixin_42613017的博客
12-31 166
在这段代码中，.attr() 方法是作用于 svg 上的，而不是 body 上的。这是因为在代码中，通过使用 d3.select(body).append(svg) 先选择了 body 元素，然后调用 .append(svg) 方法将一个新的 svg 元素添加到了 body 中，并将其赋值给了变量 svg。然后，.attr() 方法是作用于这个新创建的 svg 元素上的，设置了它的 width 和...
前端学习之HTML/标签/重点标签(上)
笑桐笔记的博客
05-18 491
了解HTML锚点 HTML 标签 重点标签 HTML列表 概念   <a>元素(或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。但严格来说，<a>元素不是一个链接，而是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话，可以作为原本链接位置的占位符，常用于home链接   注意：任何文档流内容都可以被嵌套，只要不是交互内容类别(如按钮、链接等) 属性 href   href属..
HTML5(八)——SVG 之 path 详解
前端人的博客
08-09 5932
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。 一、path 路径详解 1.1、path 命令 path 用于定义一个路径，其中命令就是控制这条路径的，以下命令就是可用于路径数据： 注：以上所有命令大小写都可以，区别是大写命令表示绝对定位
SVG path animation 实践
weixin_30825581的博客
06-29 454
无意间看到了别人用SVG做的动画，那逼格时相当，忍不住就研究起了SVG。 它和CSS3结合起来，简直把html页面当成了画板。由于笔者对于SVG也是初出茅庐，文章方面一定会存在很多不足之处，希望多多指正，共同进步。 好了，别多话就不多说了。先看下效果动图 啥，看不清，没感觉。好吧，那点击下这个链接，看下它的运行效果 https://jsfiddle.net/wsy6566/j...
svg 蒙版(mask)和剪切(clipPath)学习
黄彪博客
01-12 1214
文章目录clipPath 剪切mask 蒙版 clipPath 剪切 clipPath 剪切路径范围内是显示的，否则是不显示的 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 定义一个clipPath，值为moon --> <clipPath id=...
js动态修改path值 svg,如何使用javascript或jquery动态添加SVG图形？
weixin_31978571的博客
02-26 616
I am trying to create a SVG tag structure only when or after page loads.This request may seem strange but this is needed since most of the html markup is generated by a compiled authoring software app...
SVG从入门到放弃（2）-- 路径path的详细用法
u012576295的博客
01-17 7421
path路径是svg中最强大的图形
SVG 2D入门：文档结构与关键元素总结
图形元素如`circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, 和 `rect`，构成了SVG的基础形状和线条。 接下来是结构元素，如`defs`（定义集）用于声明可复用的图形或样式，`g`（组）用于组合元素，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值