可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
有没有办法让Chrome显示SVG光标，就像在Safari中一样？
我使用 SVG 文件作为 CSS 中的鼠标指针。 Safari 可以正确显示它，而 Chrome 会在其周围显示黑点，就像制作不良的透明 GIF 伪影一样。 检查 Safari 中的小提琴...
有没有一种简单的方法来生成矢量可绘制对象，即从现有矢量可绘制对象中生成一个带有图标的圆圈？ 示例：
我正在开发flutter应用程序，我正在生成用于支付的二维码。当用户点击“生成二维码”按钮时，它将调用返回 svg 的 API。 我的问题是，当我收到这个 svg ...
我正在使用 SVG 将图像剪切到三角形。我的目标是让路径扩展并在悬停时变成一个圆圈（平滑过渡）。 我发现的最接近的是这个 codepen 作为响应...
有没有办法减少非常小的 svg 图像的最大内容痛苦元素渲染延迟？
我有一个静态网站，其中有一个非常小的（9KB）svg 图像。 当我运行 Pagespeed Insight 时，我得到以下信息： 正如我所说，SVG 文件大小仅为 9KB。 我尝试将图像转换为 webp，结果...
org.apache.fop.fo.extensions.svg.SVGElement.getDimension 无法设置 svg 的基本 URL
我正在尝试在 instream-foreign-object 中实现 SVG，下面是代码片段；这是 XSLT (1.0) 的代码部分； 我正在尝试在 instream-foreign-object 内实现 SVG，下面是代码片段；这是 XSLT (1.0) 的代码部分； <xsl:template name="Draft"> <fo:block-container> <fo:block> <fo:instream-foreign-object> <svg:svg xmlns:svg="http://www.w3.org/2000/svg" xml:base="http://example.org/today/" > <svg:defs> <svg:font-face font-family="sample"> <svg:font-face-src> <svg:font-face-uri href="sample.ttf"/> </svg:font-face-src> </svg:font-face> </svg:defs> <svg:text> DRAFT </svg:text> </svg:svg> </fo:instream-foreign-object> </fo:block> </fo:block-container> </xsl:template> 现在，当我尝试从 xml 转换为 pdf 时，出现以下错误： org.apache.fop.fo.extensions.svg.SVGElement.getDimension Could not set base URL for svg java.lang.IllegalArgumentException: URI is not absolute at java.base/java.net.URL.fromURI(URL.java:721) at java.base/java.net.URI.toURL(URI.java:1139) at org.apache.fop.fo.extensions.svg.SVGElement.getDimension(SVGElement.java:77) . . . 那么您能帮我理解为什么我们会看到这个错误吗？ 因为您是从命令行运行 FOP，所以您的文档有一个基本 URI。现在您已经证明您的文件系统上可以有 sample.ttf，我建议将完整路径放入 sample.ttf <svg:svg xmlns:svg="w3.org/2000/svg"> <svg:defs> <svg:font-face font-family="sample"> <svg:font-face-src> <svg:font-face-uri href="file:///PATH/for/config/sample.ttf"/> </svg:font-face-src> </svg:font-face> </svg:defs> <svg:text> DRAFT </svg:text> </svg:svg> 从 https://xmlgraphics.apache.org/fop/faq.html#svg-url 来看，FOP 似乎可以从 HTTP URL 找到字体。
我正在创建 svg 路径并将其缩放到特定尺寸。假设 100x100。我正在使用 d3 根据我的要求调整数据。 然而，我想知道，我怎样才能达到完全相同的输出......
我目前正在使用 Tailwind CSS（和 Next JS）为桌面和移动视图开发一个卡片组件。为了处理响应式设计，我在移动设备上隐藏了桌面版本，反之亦然
列表_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>