svg 相关问题

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

CSS - 如何拥有或模仿半径仅适用于内部的边框

（有点）想要的结果 .父级{ 宽度：600 像素；高度：300px； --边框不透明度：0.5； --边框颜色: rgba(229, 128, 255, var(--边框不透明度)); --内部不透明度：0.2； --

css svg mask

回答 1 投票 0

SVG需要使用clipPath来裁剪DIV

我对让clipPath 在 SVG 上工作感到困惑。我希望 SVG 剪裁 DIV 的背景（纯色）。我可以让它与另一个 SVG 一起使用，但不能与我的 SVG 一起使用（无论什么原因......

css svg clip-path

回答 1 投票 0

如何在 Web 应用程序中使用 SVG 徽标？

我的网络应用程序只需要支持现代浏览器（IE 从 10 开始）。但它必须完全响应，因此它在所有可能的显示尺寸和分辨率上都应该看起来不错。它有...

css svg responsive-design cross-browser

回答 2 投票 0

SVG 文本标签使父 g 标签不可点击

我有一个带有3个按钮的svg（基于g标签路径的形状），每个按钮都有一个路径和文本元素。问题是由于文本元素，g标签不可点击，就像我用anot替换文本标签时一样...

javascript svg

回答 1 投票 0

Github Markdown SVG 文件链接不起作用

我正在 Github 存储库上创建 Markdown 文件，并希望在 Markdown 中嵌入 SVG 文件，其中 SVG 文件中的链接是可单击的。我的 SVG 文件保存在存储库的同一文件夹中。我已经

html github svg markdown

回答 2 投票 0

在 Google Maps API 的 SVG 图标内添加文本

我正在尝试使用 SVG 创建自定义 Google 地图图标。我已经走到这一步了。然而，我能找到的所有有关 SVG 的在线信息都使用这种符号：<> <>。我正在努力做...

javascript google-maps d3.js svg google-maps-markers

回答 2 投票 0

增加描边宽度属性后，图标被裁剪了

我在 Figma 中制作了一个简单的小图标，将其作为 svg 上传，我需要增加描边宽度属性。然而，这导致图标被裁剪。我尝试过调整 viewBox，...

svg

回答 1 投票 0

缩放 SVG 路径的填充部分

假设我们有以下 SVG 路径：我想知道是否有...

javascript svg d3.js

回答 2 投票 0

缩小徽标 - Photoshop

我有一个由自由职业者制作的徽标。起初，这个标志看起来很棒，我很高兴。但现在我开始使用不同尺寸的徽标，问题就开始了。我使用的自由职业者没有

image svg vector vectorization adobe-illustrator

回答 3 投票 0

Python从.svg文件获取矢量路径的坐标

因此，对于一个学校项目，我应该编写一个所谓的“V-Plotter”，我的团队构建了它，我设法编写了所有计算等等，基本上我可以让它移动到某个 x/y 坐标。 ..

python arrays svg vector raspberry-pi

回答 1 投票 0

'错误：应指定插件名称'@svgr/webpack svgoConfig

我安装了 @svgr/webpack@6.0.0 和 webpack 配置如下使用： [ { 加载器：'@svgr/webpack'，选项： { svgo配置：{ 插件：[ ...

reactjs svg webpack

回答 2 投票 0

无法从 svg 中的数据 uri 不均匀地缩放 feImage

各种 stackoverflow 答案和评论显示了在 svg 过滤器中使用以下构造的示例：（或旧语法

svg firefox svg-filters

回答 1 投票 0

如何将 mathQuill 跨度数据导入 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 中做到这一点？我有尝试...