svg 相关问题

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

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

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

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

如何在不使用 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>

SVG 虚线路径动画

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

为什么 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 这应该可行。

如何在点击一个 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。

SVG饼图/互动圈

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

如何在点击后将一个 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>

如何在 Astro 中通过 props 导入带有传递名称的 svg 图像？

我有一个组件，可以从道具中分配标题、描述和图像。我正在使用 JSON 数组进行迭代以创建此组件的多个实例并添加图像。 我有两个问题...

metro.config.js 使用 NativeWind 和 SVG 转换器

我花了几个小时寻找如何混合 NativeWind 和 SVG 阅读器来响应本机应用程序，这是我的答案：

SVG 图像在某些 Web 服务器上不显示

我在某些服务器上的 html 文件中显示 .svg 图像时遇到问题。这让我感到困惑，因为我认为是否渲染 svg 图像是由浏览器决定的，但是......

如何使用 CSS 使任何 SVG 图像灰度化？

我有一些带有 svg 扩展名的图像。我需要以灰度模式获取这些图像。是否可以仅使用 css 或我可以对文件或 标签本身执行的任何操作来完成此操作？我不...

Imagick svg 未显示

更新后（我想）这个简单的脚本不再正常工作。我已经删除了所有不必要的测试和调试代码，但仍然无法解决这个问题。 我有签名

我应该使用 SVG 作为背景而不是插入 DOM 来提高性能吗？

我的列表中有一些SVG，大约有100个节点。它们看起来像： ... 一个...

CSS：反转 SVG 的 mask-property 隐藏的区域

我有一个 SVG，并使用带有背景颜色的蒙版来显示 SVG，是否有任何属性可以用来反转蒙版？例如。通常，SVG 蒙版会隐藏任何尚未隐藏的内容...

如何使用 jQuery UI 使 SVG 标签图像可调整大小？

我有 SVG 图像，如 div 中下面的标签 我有 SVG 图像，如 div 中的下面的标签 <div id="MainDiv"> <div id="annotationText"> <svg id="circle" width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0"/> </svg> </div> </div> 我正在制作可拖动且可调整大小的。 Draggable 正在研究如何使其可调整大小，我尝试过，但它不起作用。 makeDragableCircle('#annotationText',jQuery('#MainDiv')); function makeDragableCircle(selector,obj){ var height=obj.height(); var width=obj.width(); var objdiv=jQuery( selector ); jQuery( selector ).draggable({ containment: obj, drag: function( event, ui ) { var cleft=ui.position.left*100/width; var top=ui.position.top*100/height; jQuery(event.target).attr('data-offsetx',cleft); jQuery(event.target).attr('data-offsety',top); } }).resizable({ alsoResize: "#"+circle, aspectRatio: 1.0 }); } 正如我在评论中提到的，可调整大小是为像 <div> 或 <span> 这样的盒子模型设计的。您可以在 <svg> 元素上使用它，但它会将其视为 HTML 元素。 如果你想利用它来操作 SVG 对象的结构，你需要自己动手。 $(function() { function makeDragableCircle(selector, obj) { var height = obj.height(); var width = obj.width(); var objdiv = $(selector); var circle = $("#circle", objdiv); $(selector).draggable({ containment: obj, drag: function(event, ui) { var cleft = ui.position.left * 100 / width; var top = ui.position.top * 100 / height; $(event.target).attr('data-offsetx', cleft); $(event.target).attr('data-offsety', top); } }).resizable({ aspectRatio: 1.0, containment: obj, minWidth: 40, minHeight: 40, resize: function(e, ui) { circle.attr({ width: ui.size.width, height: ui.size.height }); $("circle", circle).attr({ cx: Math.round(ui.size.width / 2) - 2, cy: Math.round(ui.size.height / 2) - 2, r: Math.round(ui.size.width / 2) - 4 }); } }); } makeDragableCircle('#annotationText', $('#mainDiv')); }); #mainDiv { width: 400px; height: 200px; border: 1px dashed #eee; } <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="mainDiv"> <div id="annotationText"> <svg id="circle" width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0" /> </svg> </div> </div> 如您所见，当您拖动时，所有东西都会移动。当您调整大小时，我们会调整 SVG 大小并调整 <circle> 的属性。 希望有帮助。

如何在 svg 中使用 mask 在 safari 上工作？

我下面有这个 svg，它在桌面和 Android 上运行得很好，但是在 safari 上甚至没有尝试显示，我不知道如何修复它，当我删除它 svg 时，我知道它的掩码 bc 的问题

尝试在 Storybook 中使用 svgr rollup 加载器时出错

我正在使用 rollup 来构建 TypeScript React 组件库。我想使用 Storybook 测试这些组件。 @svgr/webpack 加载器工作正常，但如果我用 @svgr/r 替换它......

部分透明的svg滤镜合成

我正在尝试将一种形状合成到另一种形状上。顶层是一组具有不透明度的笔画。底部只是洪水填充。 问题是我需要笔画保留其原始c...

如何摆脱告诉我将 svg 属性更改为驼峰式大小写的 React 错误警告？

最近我的团队从 React 15.1 升级到了 15.3。此升级带来了以下错误： warning.js:36 警告：未知的 DOM 属性描边宽度。您指的是描边宽度吗？ 以克为单位 在 SVG 中 ...