svg 相关问题

可缩放矢量图形(SVG)是一种基于XML的二维矢量图形格式,也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反,如果您的问题是关于SVG或与其密切相关的问题,请添加标记,例如如何使用SVG实现某些功能。

如何获得正确的 SVG 代码

我一直在尝试创建一些像这样的SVG绘图动画: SVG动画 然而,我遇到的问题是如何为此获得正确的 SVG 代码。假设我有一张 png 绘图,我想要...

回答 4 投票 0

SVG:如何将圆分成 12 个等份

我最近一直在尝试使用 SVG,更具体地说是创建一个由 12 部分组成的轮子。我在上一篇文章中发现了一个代码片段,它符合我的需求,但由 6 部分组成,而我需要 12 部分

回答 1 投票 0

通过 DOMParser SVG 命名空间将 SVG 字符串渲染到 DOM

我试图从字符串中解析 SVG 元素并将其渲染到 DOM 中,但是当我解析为 image/svg+xml 时, 以某种奇怪的方式附加到 DOM 中,但不会渲染它。 .

回答 2 投票 0

在 Web Worker 中将 SVG 转换为 PNG

我想在 Web Worker 中将 SVG 转换为 PNG。 我的问题是,无法从 Worker 内部访问 DOM, 所以我无法将 SVG 绘制到画布或类似的东西上。

回答 3 投票 0

inkscape shell 模式

我尝试通过在 .bat 文件中写入这些行来运行 inkscape shell 模式: inkscape --shell >2.svg -e 2.png 但它根本不起作用(没有png文件),更重要的是我尝试打开当前的svg我...

回答 3 投票 0

如何将我的动画 SVG 转换为 GIF

我目前没有找到任何可行的解决方案, 我可以用 puppeteer 和 ffmpge 来做到这一点,但这需要时间 也没有得到我想要的解决方案。 目前这个方法在眉毛中启动 svg...

回答 1 投票 0

在 D3 Enter() 过程中访问数组属性

我正在使用以下 CodePen,它显示一棵树作为项目的起点:https://codepen.io/augbog/pen/LEXZKK 在这支笔内部,它使用 D3.js 执行一些魔法来实例化新的...

回答 1 投票 0

将 SVG 叠加在传单 latLngBounds 上

我正在使用 Plotly 生成 SVG 等值线图。随后,我的目标是将这个 SVG 轮廓叠加到具有特定边界的地图上。我的目的是调整 SVG 的大小以适应这些边界,si...

回答 1 投票 0

如何从网站下载动画SVG文件?

我们有什么方法可以从网站下载动画 SVG 文件 - 就像从 Inspect 开发工具一样? 我想通过导入 After Effect 来检查动画是如何工作的,但是右键单击并......

回答 2 投票 0

得到这个错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:数字

我正在运行这个程序来显示SVG图像 从 'react' 导入 React, { Component }; 从'react-native'导入{查看}; 从 './assets/check-mark.svg' 导入 Expo; 从“react-nat...”导入 SVG

回答 5 投票 0

如何从 SVG 的中心而不是左上角进行 <path> 绘制? - Chrome 中的 textPath 问题

我在 HTML 页面上有一个具有动态宽度的 SVG,我想在其中绘制一个圆形文本路径,无论浏览器窗口如何调整大小,该路径都将保持居中。 #mysvg { 夫...</desc> <question vote="0"> <p>我在 HTML 页面上有一个具有动态宽度的 SVG,我想在其中绘制一个圆形文本路径,无论浏览器窗口如何调整大小,该路径都将保持居中。</p> <pre><code>&lt;style&gt; #mysvg { float: left; position: fixed; top: 0; left: 0; } &lt;/style&gt; &lt;svg id=&#34;mysvg&#34; width=&#34;100%&#34; height=&#34;100%&#34;&gt; &lt;rect x=&#34;0&#34; y=&#34;0&#34; width=&#34;100%&#34; height=&#34;100%&#34; fill=&#34;white&#34; /&gt; &lt;circle id=&#34;svg_circle&#34; cx=&#34;50%&#34; cy=&#34;50%&#34; r=&#34;360&#34; fill=&#34;none&#34; /&gt; &lt;text id=&#34;svg_text&#34; fill=&#34;black&#34;&gt; &lt;textPath xlink:href=&#34;#svg_circle&#34;&gt;my text&lt;/textPath&gt; &lt;/text&gt; &lt;/svg&gt; </code></pre> <p>我不希望圆圈缩放,因此 viewBox 不合适。但是,背景应该填满浏览器窗口。</p> <p>如果您在 Firefox 或 Safari 中测试上述代码,它将完美运行,但是 Chrome 似乎无法正确支持圆圈上的 textPaths。 Chrome 似乎需要使用 <pre><code>&lt;path&gt;</code></pre> 而不是 <pre><code>&lt;cicle&gt;</code></pre>。</p> <p>所以我的 svg 需要变成以下内容:</p> <pre><code>&lt;svg id=&#34;mysvg&#34; width=&#34;100%&#34; height=&#34;100%&#34;&gt; &lt;rect x=&#34;0&#34; y=&#34;0&#34; width=&#34;100%&#34; height=&#34;100%&#34; fill=&#34;white&#34; /&gt; &lt;path id=&#34;svg_circle&#34; d=&#34;m 0,0 a 360,360 0 1 1 720,0 360,360 0 1 1 -720,0&#34; fill=&#34;none&#34; /&gt; &lt;text id=&#34;svg_text&#34; fill=&#34;black&#34;&gt; &lt;textPath xlink:href=&#34;#svg_circle&#34;&gt;my text&lt;/textPath&gt; &lt;/text&gt; &lt;/svg&gt; </code></pre> <p>问题是我找不到任何关于如何以与原始 <pre><code>&lt;path&gt;</code></pre> 相同的方式使 <pre><code>&lt;circle&gt;</code></pre> 居中的答案。如何使路径从 SVG 的中心而不是左上角绘制?</p> </question> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>html, body { height: 100%; } body { background: pink; display: flex; justify-content: center; align-items: center; } #mysvg { position: fixed; width: 400px; height: 400px; border: 2px solid yellow; }</code></pre> <pre><code>&lt;svg id=&#34;mysvg&#34; viewbox=&#34;-200 -200 400 400&#34;&gt; &lt;circle id=&#34;svg_circle&#34; cx=&#34;0&#34; cy=&#34;0&#34; r=&#34;180&#34; fill=&#34;none&#34; /&gt; &lt;text id=&#34;svg_text&#34; fill=&#34;black&#34;&gt; &lt;textPath xlink:href=&#34;#svg_circle&#34;&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel. &lt;/textPath&gt; &lt;/text&gt; &lt;/svg&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

回答 0 投票 0

SVG 轮子问题

我一直在做我的项目,我最近用 css adn 创建了一个 12 部分的轮子,最近有人告诉我用 svg 更好更容易做到这一点,所以我一直在和一些人一起工作......

回答 1 投票 0

SVG 添加到 pdfmake pdf 时显示不正确

我有一个由yarn添加的pdfmake的react项目,组件使用d3绘制图表(svg),我使用id来获取svg。 这就是我获取 svg 并将其添加到空文档的方法: 常量 svgElement =

回答 1 投票 0

任何其他获取 svg 的边界矩形值的方法

我有必须在 JSDOM 内处理的 SVG 元素,并且需要获取它们的 getBBox() 值。 使用 getBBox() 时,由于 JSDOM 内没有执行绘制,因此值不是 obta...

回答 1 投票 0

如何在不使用 img 标签的情况下将 SVG 图像代码放入 HTML 文件中?

我有一个 SVG 图像。我知道我可以在图像标签中使用它,但这样我就无法设置 svg 的路径标签的样式。 我有一个 SVG 图像。我知道我可以在图像标签中使用它,但这样我就无法设置 svg 的路径标签的样式。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="398px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"> <g><path style="opacity:0.993" fill="#000000" d="M 235.5,-0.5 C 248.833,-0.5 262.167,-0.5 275.5,-0.5C 353.784,10.624 408.951,52.2907 441,124.5C 468.343,202.773 455.01,273.107 401,335.5C 366.395,370.719 324.561,391.386 275.5,397.5C 262.167,397.5 248.833,397.5 235.5,397.5C 147.918,384.421 90.4184,335.755 63,251.5C 44.1335,169.779 65.6335,100.946 127.5,45C 159.111,19.4077 195.111,4.24107 235.5,-0.5 Z M 252.5,88.5 C 262.79,88.2893 268.623,93.2893 270,103.5C 270.667,148.5 270.667,193.5 270,238.5C 269.085,247.249 264.252,252.249 255.5,253.5C 246.748,252.249 241.915,247.249 241,238.5C 240.333,193.5 240.333,148.5 241,103.5C 241.713,95.9701 245.546,90.9701 252.5,88.5 Z M 253.5,278.5 C 268.106,280.706 272.606,288.706 267,302.5C 259.333,310.5 251.667,310.5 244,302.5C 238.615,290.955 241.781,282.955 253.5,278.5 Z"/></g> <g><path style="opacity:0.959" fill="#000000" d="M -0.5,221.5 C -0.5,206.167 -0.5,190.833 -0.5,175.5C 5.14748,123.215 24.3141,76.5481 57,35.5C 64.1348,28.503 71.9681,27.6696 80.5,33C 85.9216,39.2833 86.7549,46.1166 83,53.5C 29.9793,120.615 16.9793,194.948 44,276.5C 53.1732,301.196 66.1732,323.53 83,343.5C 87.6577,358.723 82.1577,366.557 66.5,367C 64.0506,366.275 61.7173,365.275 59.5,364C 25.3602,322.542 5.36016,275.042 -0.5,221.5 Z"/></g> <g><path style="opacity:0.959" fill="#000000" d="M 511.5,175.5 C 511.5,190.833 511.5,206.167 511.5,221.5C 505.64,275.042 485.64,322.542 451.5,364C 441.159,369.772 432.992,367.606 427,357.5C 426.19,352.743 426.524,348.076 428,343.5C 481.02,276.389 494.02,202.055 467,120.5C 457.827,95.8038 444.827,73.4705 428,53.5C 422.821,36.6833 428.987,28.85 446.5,30C 449.562,31.0608 452.062,32.8941 454,35.5C 486.686,76.5481 505.853,123.215 511.5,175.5 Z"/></g> </svg> 这是我的 svg 图像中的代码。我想要它在 HTML 文件中。 当然,我尝试将其不包含 xml 和 doctype 标签。但没有成功。 <svg class="icon handbrake" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="398px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"> <path style="opacity:0.993" fill="#000000" d="M 235.5,-0.5 C 248.833,-0.5 262.167,-0.5 275.5,-0.5C 353.784,10.624 408.951,52.2907 441,124.5C 468.343,202.773 455.01,273.107 401,335.5C 366.395,370.719 324.561,391.386 275.5,397.5C 262.167,397.5 248.833,397.5 235.5,397.5C 147.918,384.421 90.4184,335.755 63,251.5C 44.1335,169.779 65.6335,100.946 127.5,45C 159.111,19.4077 195.111,4.24107 235.5,-0.5 Z M 252.5,88.5 C 262.79,88.2893 268.623,93.2893 270,103.5C 270.667,148.5 270.667,193.5 270,238.5C 269.085,247.249 264.252,252.249 255.5,253.5C 246.748,252.249 241.915,247.249 241,238.5C 240.333,193.5 240.333,148.5 241,103.5C 241.713,95.9701 245.546,90.9701 252.5,88.5 Z M 253.5,278.5 C 268.106,280.706 272.606,288.706 267,302.5C 259.333,310.5 251.667,310.5 244,302.5C 238.615,290.955 241.781,282.955 253.5,278.5 Z"/> <path style="opacity:0.959" fill="#000000" d="M -0.5,221.5 C -0.5,206.167 -0.5,190.833 -0.5,175.5C 5.14748,123.215 24.3141,76.5481 57,35.5C 64.1348,28.503 71.9681,27.6696 80.5,33C 85.9216,39.2833 86.7549,46.1166 83,53.5C 29.9793,120.615 16.9793,194.948 44,276.5C 53.1732,301.196 66.1732,323.53 83,343.5C 87.6577,358.723 82.1577,366.557 66.5,367C 64.0506,366.275 61.7173,365.275 59.5,364C 25.3602,322.542 5.36016,275.042 -0.5,221.5 Z"/> <path style="opacity:0.959" fill="#000000" d="M 511.5,175.5 C 511.5,190.833 511.5,206.167 511.5,221.5C 505.64,275.042 485.64,322.542 451.5,364C 441.159,369.772 432.992,367.606 427,357.5C 426.19,352.743 426.524,348.076 428,343.5C 481.02,276.389 494.02,202.055 467,120.5C 457.827,95.8038 444.827,73.4705 428,53.5C 422.821,36.6833 428.987,28.85 446.5,30C 449.562,31.0608 452.062,32.8941 454,35.5C 486.686,76.5481 505.853,123.215 511.5,175.5 Z"/> </svg> 澄清一下,我不想要这个:<img src="assets/icons/handbrake.svg"> 您可以使用我编写的 <load-file> Web 组件注入 SVG: 完整开发博客文章: https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd 所需的所有代码: // Define <load-file> Web Component customElements.define("load-file", class extends HTMLElement { async connectedCallback() { this.shadowRoot || this.attachShadow({mode: "open"}); this.shadowRoot.innerHTML = await (await fetch(this.getAttribute("src"))).text(); this.shadowRoot.append(...this.children); this.hasAttribute("replaceWith") && this.replaceWith(...this.shadowRoot.children) } }) svg,load-file { width: 150px; display: inline-block; } <!-- USE Web Component : replace <load-file> with SVG --> <load-file replaceWith src="//load-file.github.io/heart.svg"></load-file> <load-file src="//load-file.github.io/heart.svg"> <!-- create <load-file> with shadowDOM, inject <style> --> <style shadowRoot> path:nth-child(2n+2) { fill: GREEN; /* shadowDOM style does NOT style global DOM */ } </style> </load-file>

回答 1 投票 0

SVG 虚线路径动画

如何将线条更改为虚线并且仍然有动画?我尝试了很多事情但我无法弄清楚: svg { 宽度:100%; 高度:自动; } 。小路 { 填充:无; 中风:#

回答 1 投票 0

为什么 ImageMagick 中 SVG 的 use-Tag 被忽略?

如果您例如使用(无双关语)来自 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use 的 SVG use 标签的示例用法 如果您例如use(无双关语)来自 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use 的 SVG use 标签的示例用法 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" /> <use href="#myCircle" x="10" fill="blue" /> <use href="#myCircle" x="20" fill="white" stroke="red" /> </svg> 并在浏览器中观看,您将看到三个圆圈,原始的和两个重复使用的副本。另一方面,如果您将此代码输入 ImageMagick,您将只能看到一个圆圈,因为 ImageMagick 中的 SVG 处理器会忽略 use 标签。 有什么办法可以修复吗? 图像应该是这样的: 如 ImageMagick 显示: 如您所见,ImageMagick 忽略了标签,因此元素没有按照您希望的方式复制。 为了实现您想要的效果,您必须在提交之前对 SVG 进行预处理。 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle1" cx="5" cy="5" r="4" stroke="blue" fill="blue" /> <circle id="myCircle2" cx="15" cy="5" r="4" stroke="blue" fill="white" /> <circle id="myCircle3" cx="25" cy="5" r="4" stroke="red" fill="white" /> </svg> 之后,对新的 SVG 进行光栅化。 convert input.svg output.png 这应该可行。

回答 1 投票 0

如何在点击一个 svg 后将其切换到另一个 svg?

我有这个太阳 svg 图像,可将页面切换为深色模式: 我有这个太阳 svg 图像,可将页面切换为深色模式: <svg onclick="myFunction()" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> </path> </svg> 这是 JavaScript: function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); } 这是一些CSS: .dark-mode { background: #333; } .dark-mode path { fill: #fff; stroke: #fff; } 但是,我希望在单击 svg 作为替换后,也可以切换 svg 本身。这是要切换到的另一个 svg,这是一个月亮 svg 图像: <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg"> <path d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> </path> </svg> 请问这该怎么办? 您可以将路径保存为字典,并将 svg 传递到 myFunction 中,并根据 innerHTML 返回的内容更新 classList.toggle: var lighting_mode_paths = { 'moon': '<path d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>', 'sun': '<path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>', }; function myFunction(svg) { var element = document.body; if (element.classList.toggle('dark-mode')) { svg.innerHTML = lighting_mode_paths['moon']; } else { svg.innerHTML = lighting_mode_paths['sun']; } } .dark-mode { background: #333; } .dark-mode path { fill: #fff; stroke: #fff; } <svg onclick="myFunction(this)" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> </path> </svg> 如果已将类添加到 element.classList.toggle,true 将返回 element,如果已从 false 中删除类,则将返回 element。

回答 1 投票 0

SVG饼图/互动圈

我正在创建一个具有不同分段的 svg 圆圈,其工作方式类似于用于显示/隐藏内容的选项卡。它基本上是一个饼图。我无法在视觉上区分我所在的部分

回答 1 投票 0

如何在点击后将一个 svg 切换到另一个 svg?

我有这个太阳 svg 图像,可将页面切换为深色模式: 我有这个太阳 svg 图像,可将页面切换为深色模式: <svg onclick="myFunction()" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> </path> </svg> 这是 JavaScript: function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); } 这是一些CSS: .dark-mode { background: #333; } .dark-mode path { fill: #fff; stroke: #fff; } 但是,我希望在单击 svg 作为替换后,也可以切换 svg 本身。这是要切换到的另一个 svg,这是一个月亮 svg 图像: <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg"> <path d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> </path> </svg> 请问这该怎么办? 您可以将路径保存为字典,并将 svg 传递到 myFunction 中,并根据 innerHTML 是否具有 element 类来更新 dark-mode: var lighting_mode_paths = { 'moon': '<path d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>', 'sun': '<path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>', }; function myFunction(svg) { var element = document.body; element.classList.toggle("dark-mode"); if (element.classList.contains('dark-mode')) { svg.innerHTML = lighting_mode_paths['moon']; } else { svg.innerHTML = lighting_mode_paths['sun']; } } .dark-mode { background: #333; } .dark-mode path { fill: #fff; stroke: #fff; } <svg onclick="myFunction(this)" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> </path> </svg>

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.