svg 相关问题

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

我正在使用node、javaScript中的mathQuill库为网站创建一个科学公式生成器。我只使用一个跨度，正如 mathQuill 文档所述，如下所示我正在使用 Node、javaScript 中的 mathQuill 库为网站创建一个科学公式生成器。我只使用一个跨度，正如 mathQuill 文档所述，如下所示 <p class = "mt-3">Type math below</p> <span id = "math-field"></span> <label for = "latex">LaTeX : </label> <input id = "latex"/> 我已经下载了 mathQuill 0.10.1 版本，这是样式表和脚本  <link href = "../static/libraries/mathquill-0.10.1/mathquill-basic.css" rel = "stylesheet">  <script src = "../static/libraries/mathquill-0.10.1/mathquill.min.js"></script> 这是脚本 const MQ = MathQuill.getInterface (2) const latex_span = $ ('#latex') const mathField = MQ.MathField (document.getElementById ('math-field'), { spaceBehavesLikeTab: true, // configurable handlers: { edit: function () { latex_span.val (mathField.latex ()); // simple API } } )} latex_span.keyup (() => { mathField.latex (latex_span.val ()) )} 所有这些都工作正常，但我想将 span 标记 (#latex) 内生成的 HTML 代码导入到 SVG 文件中。在我想将此 SVG 添加到 paperjs canvas 后。我一直坚持将 span 标记内的 HTML 代码转换为 SVG 文件。有没有可能的方法来做到这一点？我只在 StackOverflow 中找到了 this 问题，将此 span 标签导出到 SVG 文件。 mathQuill 文档和任何地方都没有任何内容。至少有人可以给我一个参考链接提前致谢！我正在制作类似于此用户界面的东西，但我无法切换。我添加了 2 个按钮作为数学和希腊语。所以我想要的是，当我单击数学时，应加载数学运算符，当我单击希腊语时，应加载希腊运算符，但每次加载数学运算符时。我尝试 console.log 公式正在更改，但未反映在 UI 中。您可以在此处分享具有切换功能的数学鹅毛笔代码吗？这真的很有帮助。在此处输入图像描述

javascript html svg mathquill

回答 1 投票 0

Flutter web：svg 上未处理的元素过滤器

我将项目更新为flutter 2.0.2，没有空安全性。现在我正在尝试在网络上吃午餐（chrome）。当应用程序在启动页面中启动时，我加载了一个 svg 图像。 svg 已在 chrome 上加载，但最终...

flutter svg flutter-web

回答 5 投票 0

SVG 中没有 defs 的线性渐变

我可以在 SVG 中使用带有 defs-section 的线性渐变，例如：我可以在 SVG 中使用带有 defs-section 的线性渐变，例如： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 我可以使用没有 defs-section 的线性渐变吗？我发现这样的东西： <rect style="fill:lineargradient(foo)"> <defs> 仅用于结构化目的，其中的元素不会显示，但由于渐变仅在应用于形状或其他元素时才可见，因此您可以在文档的任何位置定义它。但是你仍然必须坚持正确的语法： <rect style="fill:url(#myLinearGradient1)" ... /> 如果对这是否有效有疑问，这里是问题中的确切代码，作为可执行堆栈片段： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 这是完全相同的代码，没有 <defs>/<\defs>: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 上述两个可执行代码片段都显示了预期的结果（至少在 chrome 和 firefox 中），这是一个填充有渐变的 100x100 矩形（绿色阴影垂直变化）：是的，你确实可以拥有渐变而不需要 defs 元素；您只需将渐变元素放在代码中的其他位置即可，例如这样： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg>

svg gradient linear-gradients

回答 2 投票 0

我可以使用 CSS 更改 svg 路径的填充颜色吗？

我有以下代码：我有以下代码： <span> <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> <desc></desc> <defs/> <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> </svg> </span> 是否可以使用 CSS 或其他方式更改 SVG 路径的填充颜色，而无需在 <path> 标签内实际更改它？是的，您可以将CSS应用于SVG，但您需要匹配元素，就像设置HTML样式时一样。如果您只想将其应用于所有 SVG 路径，您可以使用，例如： path { fill: blue; } 外部 CSS 似乎会覆盖路径的 fill 属性，至少在我测试的基于 WebKit 和 Gecko 的浏览器中是这样。当然，如果你写，比如，<path style="fill: green">，那么它也会覆盖外部 CSS。 2021 年 4 月编辑如果您进入 SVG 文件的源代码，您可以通过修改填充属性来更改颜色填充。 <svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg> 使用您最喜欢的文本编辑器，打开 SVG 文件并使用它。我想出了另一种从 SVG 外部更改颜色的方法，那就是导入 SVG 内容并删除声明填充的样式规则。然后从我的 CSS 样式表中控制填充。 <svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" /></g></svg> 然后在我的 CSS 文件中进行以下操作： svg{ fill: green; } 现在您正在从 SVG 中删除更高层次结构的填充声明，外部的声明将获得控制权。这对我来说完全没有问题。如果您想通过将鼠标悬停在元素中来更改颜色，请尝试以下操作： path:hover{ fill:red; } 放入所有的 svg： fill="var(--svgcolor)" CSS 中： :root { --svgcolor: tomato; } 使用伪类： span.github:hover { --svgcolor:aquamarine; } 解释 root = html 页面。 --svgcolor = 变量。 span.github = 选择一个带有 github 类的 span 元素，内部有一个 svg 图标并分配伪类悬停。你把这个 css 放在 svg 圆圈中。 svg:hover circle{ fill: #F6831D; stroke-dashoffset: 0; stroke-dasharray: 700; stroke-width: 2; } 我发现了一个关于 css-tricks 的惊人资源：https://css-tricks.com/using-svg/ 那里解释了一些解决方案。我更喜欢那种需要对源 svg 进行最少编辑的版本，并且不需要将其嵌入到 html 文档中。此选项使用 <object> 标签。使用 <object> 将 svg 文件添加到 html 中；我还声明了 html 属性 width 和 height。使用这些宽度和高度，svg 文档不会缩放，我在关联的 svg css 文件中使用 css transform: scale(...) 语句为 svg 标签解决了这个问题。 <object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object> 创建一个 css 文件附加到您的 svn 文档。我的源 svg 路径缩放到 16px，我将其放大到 64，因子是四倍。它只有一个路径，所以我不需要更具体地选择它，但是该路径有一个 fill 属性，所以我必须使用 !IMPORTANT 来强制 css 优先。 #svg2 { width: 64px; height: 64px; transform: scale(4); } path { fill: #333 !IMPORTANT; } 在打开 <svg 标签之前编辑目标 svg 文件，以包含样式表；请注意，href 是相对于 svg 文件 url 的。 <?xml-stylesheet type="text/css" href="myfile.css" ?> 可以更改 svg 的路径填充颜色。请参阅下面的 CSS 片段：为所有路径应用颜色：svg > path{ fill: red } 申请第一条d路：svg > path:nth-of-type(1){ fill: green } 申请第二条d路径：svg > path:nth-of-type(2){ fill: green} 申请不同的d路径，只需更改路径编号即可： svg > path:nth-of-type(${path_number}){ fill: green} 为了支持 Angular 2 到 8 中的 CSS，请使用封装概念： :host::ng-deep svg path:nth-of-type(1){ fill:red; } 您可以使用此语法，但需要对 SVG 文件进行一些更改。并从 SVG 本身中删除任何填充/描边。图标.svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">  <symbol id="location" viewBox="0 0 430.114 430.114">  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0 C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136 c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857 c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262 C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939 c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06 C270.138,174.729,244.833,199.193,214.245,199.193z"/> </symbol> icon.html <svg><use xlink:href="file_path/location.svg#location"></use></svg> 更改任何 SVG 颜色使用标签添加 SVG 图像。 <img src="dotted-arrow.svg" class="filter-green"/> 要过滤到特定颜色，请使用以下 Codepen（单击此处打开 Codepen）将十六进制颜色代码转换为 CSS 过滤器：例如，#00EE00 的输出是 filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); 将 CSS 过滤器添加到此类中。 .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); } 如果使用路径，可以设置描边颜色：我在这里使用了悬停效果： svg:hover path { stroke: blue; } 您应该能够使用以下方式修改尺寸、颜色或其他属性： :host::ng-deep svg { ... } 要使用 CSS 更改任何 SVG，您需要定位 SVG 本身的 fill 属性。如果 SVG 没有填充属性，您仍然可以使用填充属性。无论框架如何，这都适用于 CSS。你可以像这样定位它（我喜欢给我的 SVG 类以使其更容易）： .class { fill: #fff; } 这是一个适合我的简单解决方案：将 svg 放入带有“id”的 div 标签中然后 #id-div svg g { fill: #3366FF; }

css svg

回答 13 投票 0

为什么canvg选项中的scaleWidth和scaleHeight异常大？

我的代码片段产生了我想要的输出......非常接近。然而，我很难理解为什么scaleWidth和scaleHeight需要为400。我的目标是用宽度和

svg canvg offscreen-canvas

回答 1 投票 0

如何获得 SVG 折线点的百分比？

我希望能够创建 SVG 路径，其中 0,0 位于屏幕左上角，100,100 位于右下角。这就是我到目前为止所拥有的，它只是在中心创建图形，而不是......

html css svg

回答 2 投票 0

如何在flutter中将文本环绕在svg周围？

所以我有一个 svg 和一些多行文本，我想水平对齐，但问题是下一行文本应该覆盖 svg 的底部区域，如何在 flutter 中做到这一点？我有尝试...

flutter svg

回答 1 投票 0

为什么色调旋转 +180deg 和 -180deg 不会产生原始颜色？

通过阅读HSL/HSV颜色理论，我得到的印象是色调分量是一个循环属性，每360度重复一次，并且可以独立于饱和度和亮度/值而改变。 C...

css svg colors svg-filters hsl

回答 3 投票 0

我可以制作一个具有多种效果的 SVG 滤镜吗？

我正在尝试创建一个滤镜，既可以将亮度降低到 30%，又可以将图像灰度到 90%。在 webkit 上，这非常简单，但 Gecko 目前仅支持通过

html css svg gecko svg-filters

回答 1 投票 0

使用JS获取SVG中元素的绝对坐标

论坛用户好时光。我提前为我的英语道歉。我找不到答案（我决定去问英语观众）。嵌套在

javascript svg ecmascript-6

回答 4 投票 0

带圆角的圆环图 - 有可能吗？ [已关闭]

我需要将其实现为圆环图 - 我四处寻找 css/svg/canvas 解决方案，但找不到任何可靠的方法。我知道我可以将每个部分的角完全圆化，...

javascript css svg charts html5-canvas

回答 2 投票 0

pixijs 中的模糊 SVG

我正在尝试使用 PIXIJs 库来显示 SVG 图像，但在智能手机上 SVG 看起来很模糊。这是示例代码 var $ = window.jQuery; var PIXI = window.PIXI; $(文档).准备好(

javascript android canvas svg pixi.js

回答 2 投票 0

将描边渐变定义从 SVG 移至 CSS

有一个渐变，定义如下：有一个渐变，定义如下： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs>  <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> 它在 CSS 类中被引用，应用于另一个 <path> 中的 <svg>: .circle-graph-blue-greenish { stroke: url(#circle-graph-blue-greenish-gradient); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } svg { height: 50vh; } <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs>  <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> <svg class="rotate-90" width="75%" viewBox="0 0 100 100"> <path class="circle-graph-underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"></path> <path d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50" class="circle-graph circle-graph-blue-greenish" style="stroke-dashoffset: 251.677;stroke-dasharray: 282.783;"></path> </svg> 效果很好。我想将渐变定义移至 CSS 类中： .circle-graph-blue-greenish { stroke: linear-gradient(0deg, rgba(0,213,189,1) 0%, rgba(36,193,237,1) 100%); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } 但不幸的是它已经停止工作（没有可见的中风）。为什么这两个定义不相同？如何在 CSS 中定义 stroke 的渐变？ UPD 看来我可以移动颜色值： <stop offset="0" stop-color="var(--circle-graph-blue-greenish-gradient-color-1)" /> 总比没有好。想要在 CSS 中完成所有事情。 .pie { --my-color-1: #00d5bd; width: 200px; aspect-ratio: 1; border-radius: 50%; background-image: radial-gradient(circle, black 60%, transparent 60%), conic-gradient(transparent 75%, var(--my-color-1) 75%, var(--my-color-1) 84%, orange 84%, orange 92%, red 92%), radial-gradient(circle, black 65%, transparent 65%); } <div class="pie"></div>

html css svg linear-gradients stroke

回答 1 投票 0

React Native SVG 堆叠圆圈不显示内半部分

较暗的半透明环应该与较亮的半透明环具有相同的厚度，但由于某种原因不是。当我从“前景”圆圈中去掉不透明度时，问题就开始了。我不知道为什么，并且

react-native svg

回答 1 投票 0

如何在画布中已有的内容上绘制 SVG？

我想要做的是将 SVG 绘制在画布上的蓝色圆圈上。蓝色圆圈应该是背景。然而，结果只是 SVG。最终结果应该类似于 (

svg canvg offscreen-canvas

回答 1 投票 0

如何更改 svg 的颜色？

我在 Web Worker 内部使用 canvg 将 SVG 绘制到 OffscreenCanvas 中。我将用黑色绘制 SVG。是否可以在不修改 SVG 本身或使用 CS 的情况下将颜色应用于 SVG...