可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
列表_navbarItems = [ 持久底部导航栏项目（ 图标：SvgPicture.asset( '图片/sofa_home.svg', 宽度：22， ), activeColorPrimary：ColorsConst.yellow， 标题：“家”， inactiveColorPrimary：ColorsCo...
我正在使用 svg-captcha 库（链接 npm），但是我找不到验证从用户发送到服务器的验证码的方法。 现在我可以用它来生成验证码并返回客户端。 这是我的代码： 应用程序....
我想使用 SVG 文件作为某些图像的蒙版。然而，它并没有被使用，而是隐藏了整个图像。我单独包含它是为了检查路径是否错误，但作为图像......
将 svg 图像添加到资产 Swift xcode 后会翻转
所以，我有一张图像，当我打开它时 - 看起来不错 但是当我将它添加到项目中时，它变得颠倒了 我尝试向项目添加一个颠倒的图片（因此它再次旋转并变成......
因此，正如标题所示，当单击 SVG 的部分内容但没有成功时，我尝试将其移动到屏幕中心。 我不知道为什么会发生这种情况，因为我在不同的地方尝试过......
我想要一个 svg 作为图标，但我不想将其作为单独的文件引用，如下所示： 我想要一个 svg 作为图标，但我不想将其作为单独的文件引用，如下所示： <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml"> 我想将从 bootstrap 获得的这个图标作为图标，而无需下载它： <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/> </svg> 有办法做到这一点吗？ 仅在 CSS url 中才需要转义 < 和 >。唯一需要转义的字符是颜色符号和链接中的# fill="currentColor" 什么也不做；仅当您在 <body> 中使用 SVG 时 sizes属性不是必需的，在我的实验中 并且不再需要 type 属性 说文档。 那些 Bootstrap 图标臃肿，可以通过增加路径和更改 viewBox 来变小 制作 HTML 文件：（在 SVG 中添加换行符仅用于演示目的） ##基本代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="data:image/svg+xml,YOUR SVG HERE" /> </head> <body></body> </html> 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'> <path d='M55 5a5 5 90 015-5h40a5 5 90 010 10h-10v11a70 70 90 0135 123l8 8a5 5 90 01-7 7l-9-9 a70 70 90 01-37 11a70 70 90 01-37-11l-9 9a5 5 90 01-7-7l8-8a70 70 90 0135-123v-11h-10 a5 5 90 01-5-5z m-46 49a25 25 90 1135-35a80 80 90 00-35 35z m126-44c-8 0-14 3-19 9a80 80 90 0135 35a25 25 90 00-16-44z m-50 40a5 5 90 00-10 0v39l-15 29a5 5 90 109 5l15-30a5 5 90 001-2v-40z'/> </svg>" /> </head> <body></body> </html> 尝试使用数据 URL。 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' class='bi bi-alarm-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z'/%3E%3C/svg%3E" sizes="any" type="image/svg+xml">
使用 RTL 语言时，Safari 渲染 svg 文本 tspan 的位置错误
当文本为 RTL 时，Safari 会忽略带有 的 tspan 位置并反转它们。 这是片段： <svg height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- Border --> <rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" /> <path d="M60,5 L60,115 M5,60 L115,60" stroke="pink" /> <g transform="translate(60,0)"> <text x="60" y="60" tabindex="0" focusable="true" style="fill: rgb(96, 94, 92); font-family: 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 12px; text-anchor: middle;"> <tspan x="0" dy="0">دولة الإمارات العربية</tspan> <tspan x="0" dy="20" style="fill: lightsalmon">المتحدة</tspan> <title>دولة الإمارات العربية المتحدة</title> </text> </g> <style> <![CDATA[ text { font-weight: bold; } ]]> </style> </svg> 这是它在 Chrome 和 Firefox 中的样子： 但这就是它在 Safari 中的样子： Safari 似乎忽略了第二个 dy 的 tspan 属性，并且可能首先定位。这是 Safari 渲染引擎的问题还是有什么办法可以解决这个问题？ ][3]][3] State 2023：显然，是一个 webkit（核心）问题（并非特定于 safari 的 webkit 实现） 我可以在使用这些基于 webkit 的浏览器运行 linux mint 的虚拟机中重现此错误： 网络/顿悟 绿 您应该报告的错误： Webkit 错误报告 苹果Safari 有关从右到左问题的相关 webkit 错误报告： “带有希伯来语文本的 SVG 错误移动” 解决方法：在“线”之间插入从左到右标记<tspan>： svg { height: 20em; font-family: sans-serif; } tspan { direction: rtl; } <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" /> <path d="M60,5 L60,115 M5,60 L115,60" stroke="pink" /> <text x="60" y="60" style="fill: rgb(96, 94, 92); font-family: 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 12px; text-anchor: middle;"> <tspan x="60" y="60" dy="0">دولة الإمارات العربية</tspan> <!-- left-to right mark --> <tspan dx="-0.5em" class="br">‎</tspan> <tspan x="60" dy="20" style="fill: lightsalmon">المتحدة</tspan> </text> </svg> 我们实际上是在伪线 <tspan> 元素之间从 从右到左切换到 从左到右。 dx="-0.5em"补偿了引入的额外空间（...尽管从右到左的标记/字符不应该占用任何空间）。 另请参阅 “如何在 SVG 中分隔从右到左的文本，且中间不包含英文字母？” 我不知道正确的行为应该是什么，但 Safari 显然对此有自己的想法。无论如何，如果您将每个 <tspan> 放入其自己的 <text> 元素中，它似乎可以在各种浏览器上实现您所期望的效果。 <svg height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- Border --> <rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" /> <path d="M60,5 L60,115 M5,60 L115,60" stroke="pink" /> <g transform="translate(60,0)"> <text x="60" y="60" tabindex="0" focusable="true"> <tspan x="0" dy="0">دولة الإمارات العربية</tspan> <title>دولة الإمارات العربية المتحدة</title> </text> <text x="60" y="60" tabindex="0" focusable="true"> <tspan x="0" dy="20" style="fill: lightsalmon">المتحدة</tspan> </text> </g> <style> <![CDATA[ text { font-weight: bold; fill: rgb(96, 94, 92); font-family: 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 12px; text-anchor: middle; } ]]> </style> </svg> 总的来说，我经常发现 Safari 的 <tspan> 行为粗略。如果可以的话，我发现将文本元素保留在自己的 <text> 元素中，并将位置和样式直接附加到这些元素上更可靠。
我想构建一个桌面背景（或Excel文件，然后是背景），从各个网站抓取免费信息并每天更新（或将来，更定期地在...
将自定义 SVG 图标添加到 Fluent UI 命令栏项目
我有多个命令栏项目需要自定义 SVG 图标，但无论我做什么，我都无法让这些图标为我的生活服务。 这是我注册为图标的 SVG： 注册图标({ 我...
我正在尝试创建一个应用程序来练习绘制汉字。我正在使用 svg 来绘制线条。我可以画一条折线，但它都是相连的。我需要绘制多条单独的线。我正在使用...
在页面加载期间，我的网站上有一个 SVG 动画叠加层。当所有内容加载完毕后，它会被隐藏。如何让动画运行流畅？我宁愿加载时间长一点，也不愿...
当我尝试应用这段代码时，它本身运行得很好， 当我尝试应用这段代码时，它本身运行得很好， <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Toggle Class</title> <style> .ces-smiley { cursor: pointer; transition: stroke-width 0.3s, stroke 0.3s; } .selected { stroke-width: 2; stroke: red; } .inactive { /* Define your inactive styles here */ opacity: 0.5; } </style> </head> <body> <div class="ces-smileys"> <svg class="ces-smiley-zma ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"></circle> </svg> <svg class="ces-smiley-mak ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue"></rect> </svg> <svg class="ces-smiley-neu ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,5 90,90 10,90" stroke="black" stroke-width="3" fill="yellow"></polygon> </svg> <svg class="ces-smiley-moe ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="orange"></ellipse> </svg> <svg class="ces-smiley-zmo ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3"></line> </svg> </div> <script> // Select all SVG elements with the class "ces-smiley" var svgs = document.querySelectorAll('.ces-smiley'); // Add click event listener to each SVG element svgs.forEach(function(svg) { svg.addEventListener('click', function() { // Remove the 'selected' class from all SVG elements svgs.forEach(function(svg) { svg.classList.remove('selected'); svg.classList.add('inactive'); // Add 'inactive' class to all SVGs }); // Add the 'selected' class to the clicked SVG element and remove 'inactive' class this.classList.remove('inactive'); this.classList.add('selected'); }); }); </script> </body> </html> 到我的网页：https://www.salland.nl/?bctest 代码不起作用（要查看代码在哪里使用，您首先必须单击左侧的紫色按钮，然后单击之后的表格，然后您会看到我想要切换的课程（笑脸）） 我安慰了 Chat GPT，检查了所有的类、控制台并在网上寻找答案，希望能找到一些东西来帮助我修复它。到目前为止还没有成功。 试试这个代码： var svgs = document.querySelectorAll('.ces-smiley'); svgs.forEach(function(svg) { svg.addEventListener('click', function() { svgs.forEach(function(svg) { svg.classList.remove('selected'); }); this.classList.add('selected'); }); }); .ces-smiley { cursor: pointer; transition: stroke-width 0.3s, stroke 0.3s; opacity: 0.5; } .ces-smiley.selected { stroke-width: 2; stroke: red; opacity: 1; } <div class="ces-smileys"> <svg class="ces-smiley-zma ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"></circle> </svg> <svg class="ces-smiley-mak ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue"></rect> </svg> <svg class="ces-smiley-neu ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,5 90,90 10,90" stroke="black" stroke-width="3" fill="yellow"></polygon> </svg> <svg class="ces-smiley-moe ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="orange"></ellipse> </svg> <svg class="ces-smiley-zmo ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3"></line> </svg> </div>
我在使用 FluentAvalonia v2.0.5 框架在 avalonia v11.0.6 中渲染 SVG 图标时遇到一些问题。 示例 svg： 我在使用 FluentAvalonia v2.0.5 框架在 avalonia v11.0.6 中渲染 SVG 图标时遇到一些问题。 示例 svg： <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.3101 16H16.3101M12.3101 16H5.31006C4.77963 16 4.27092 15.7893 3.89584 15.4142C3.52077 15.0391 3.31006 14.5304 3.31006 14V6C3.31006 5.46957 3.52077 4.96086 3.89584 4.58579C4.27092 4.21071 4.77963 4 5.31006 4H19.3101C19.8405 4 20.3492 4.21071 20.7243 4.58579C21.0993 4.96086 21.3101 5.46957 21.3101 6V8.24454M12.3101 16V20M12.3101 20H16.3101M12.3101 20H8.31006" stroke="#202020" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 代码使用： xmlns:ui="using:FluentAvalonia.UI.Controls" <ui:FAPathIcon Data="M12.3101 16H16.3101M12.3101 16H5.31006C4.77963 16 4.27092 15.7893 3.89584 15.4142C3.52077 15.0391 3.31006 14.5304 3.31006 14V6C3.31006 5.46957 3.52077 4.96086 3.89584 4.58579C4.27092 4.21071 4.77963 4 5.31006 4H19.3101C19.8405 4 20.3492 4.21071 20.7243 4.58579C21.0993 4.96086 21.3101 5.46957 21.3101 6V8.24454M12.3101 16V20M12.3101 20H16.3101M12.3101 20H8.31006" /> 预期输出： 实际输出： 据我了解，问题是我无法将填充设置为“无”作为渲染规则，而且我不知道如何实现这一点。 问题是我如何在 avalonia 中绘制此类或类似的 svg 图标。 我安装了 Avalonia.Svg.Skia 软件包以便在 Avalonia 项目中使用 Svg 图像。 您可以轻松地在 Rider 或 Visual Studio 等现代 IDE 中添加此包。 安装后，您可以在 Avalonia 应用程序中使用 Svg 图像，如下所示： <Svg Path="/Assets/__AJ_Digital_Camera.svg"/> 该软件包还支持许多其他功能，您可以查看上面的链接以获取更多有用的信息。
我的 nextjs 项目（我们称之为 TheHost）引用了另一个 npm 包（我们称之为 ThePackage）。 在 TheHost 中定义时，SVG 加载正常，但导入 ThePackage 失败，因为 next 尝试
将 SVG 节点（Macaw）转换为 NSImage Swift4 / Cocoa
我正在尝试将 Macaw SVG（节点）转换为 NSImage。我能够在 Macaw 论坛上找到 IOS 的示例代码，但无法使其在 Cocoa 中运行。 金刚鹦鹉里有参考文献
我正在开发一个 MAUI（Microsoft .NET 多平台应用程序 UI）应用程序，其中有一张代表一杯水的图像。我想根据...
如何将 Font Awesome IconDefinition 转换为 Kendo UI SVGIcon
Kendo UI 最近刚刚在其小部件中默认使用 SVG 图标（链接），但他们的图标选择不是很好。我想改用 FontAwesome 图标，但它们有差异...
我正在尝试使用鼠标使 SVG 的一部分可拖动和缩放，但失败了。拖动有效，但缩放不起作用。我基本上从这里窃取了大部分代码。 var makeDraggable = (
我正在查看 circliful.js 的源代码，发现了以下代码行： ' 我正在查看 circliful.js 的源代码，发现了以下代码行： '<text class="timer" text-anchor="middle" x="' + textX + '" y="' + textY + '" style="font-size: ' + settings.percentageTextSize + 'px; ' + additionalCss + ';' + settings.textAdditionalCss + '" fill="' + settings.fontColor + '">0%</text>' 假设textX和textY的值分别是常数175和35，为什么当圆的宽度改变时，图标的位置保持不变？ 基本上，上面的代码行是您在this Fiddle中看到的百分比值，您在小提琴中看到的50%是上面的代码行。 所以当我有以下 CSS 时： #circli { max-width: 400px; } 尽管 175 和 35 的值恒定，但 50% 的位置仍然位于同一位置，如果我像这样更改 CSS： #circli { max-width: 200px; } 尽管 50% 和 175 具有恒定值，但 35 的位置仍然相同。为什么会这样？ SVG 中的元素是在恒定坐标系中定义的。您所做的只是更改 SVG 内部的 <div> 的大小。 SVG 会自动缩放以适合 div。 SVG 正在缩放，因为它有一个 viewBox。 viewBox 告诉渲染器 SVG 文档的限制是什么，并触发自动缩放。如果它没有 viewBox，它就不会自动调整大小。