可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
我有四个 SVG 形状，用作文本框，其中包含人们可以预订的课程的描述。在文本框的底部，我想要两个按钮，可以选择查看更多信息...
我正在尝试使用物理引擎 Matter JS 渲染 svg 路径。该路径使用 Matter JS 进行渲染，但它没有按照应有的方式渲染。我的理解是我首先需要加载pathseg ...
我有一个矢量图形文件（这里是 svg），我想将其显示在窗口中，并且能够在运行时放大和缩小（使用 CTRL +/-/0）而不会损失质量。不幸的是 Qt 似乎...
我有这样的事情： .速度描述{ 字体大小：计算 rem(9px)； } 我有这样的东西： .speed-description { font-size: calculate-rem(9px); } <svg #speedAnimation class="{{ speedAnimationClass }}" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet"> <path class="loader" d="m 0 120 a 1 1 0 0 1 120 0" fill="none" stroke-linecap="round" stroke-width="11" /> <text text-anchor="middle" x="60" y="110" font-weight="900" ></text> <text text-anchor="middle" x="60" y="120" font-weight="bold" class="speed-description"> {{ speedDescription }} </text> </svg> 无论我尝试什么，我都无法将这两个文本设为粗体。 我做错了什么？ 目前是这样的 正如我所评论的：在 SVG 中，您可以向文本添加笔划。这将使文本看起来像粗体。您可以根据需要使用笔画宽度将其设置为粗体。 text{stroke:black; stroke-width:.5} <svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet"> <text text-anchor="middle" x="60" y="100" >some text</text> <text text-anchor="middle" x="60" y="120" class="speed-description">speed Description</text> </svg> 您也可以使用 <feMorphology> 来实现此目的。在这种情况下，您需要使用 <feMorphology> 的半径属性值 <svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet"> <filter id="dilate"> <feMorphology operator="dilate" radius=".5"/> </filter> <text text-anchor="middle" x="60" y="100" filter="url(#dilate)" >some text</text> <text text-anchor="middle" x="60" y="120" class="speed-description" filter="url(#dilate)">speed Description</text> </svg> font-weight="bold" 应该按照 MDN 文档工作。 请参阅 - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight 这对我有用。
使用 React，我创建了一个应用程序，允许用户在人体图上选择一块肌肉来查看该肌肉的信息。 下一步，我现在想删除按钮...
Fontawesome 免费图标用作页面图标，例如 Fontawesome 免费图标用作页面图标，例如 <html><head> <link rel='icon' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/pen-to-square.svg'> </head></html> 出现黑色图标的是 Chrome 选项卡： 如何更改此图标颜色？ 还使用了Bootstrap 5。 可以使用 bootstrap text-danger 类更改内部 html 页面颜色，例如 <i class="fa-regular fa-pen-to-square text-danger"></i> 或使用风格： .fa-pen-to-square { color: red; } 如何更改页面图标颜色？ 这是使用 FontAwesome 免费 SVG 图标、Bootstrap 5、jquery 和 jquery ui 的 ASP.NET 9 MVC 应用程序。 更新 看起来像颜色属性 fill = "#AB7C94" 应按照如何更改“svg”元素的颜色？中所述注入到 SVG 中 并且内联数据 uri 应用于页面图标。 颜色被指定为 html 颜色名称。如何在 svg 中使用 html 颜色名称或将它们转换为 svg 中所需的颜色十六进制值？ 或者 svg 过滤器可以应用于 FontAwesome 图标吗？不确定 FontAwesome 免费图标许可证是否允许图标修改。 不幸的是，无法使用 HTML 中应用的 CSS 类或样式动态更改 favicon 颜色，因为浏览器将 favicon 呈现为独立于 DOM 的独立图像资源。要更改用作网站图标的 FontAwesome 图标的颜色，您需要修改 SVG 文件本身。 大多数 CDN（包括 FontAwesome）以默认黑色或无颜色提供 SVG。他们不提供动态颜色定制。但是，您可以： 搜索允许动态自定义 SVG 颜色的服务（尽管这些服务很少见且通常不是免费的）。 SVGOMG 或类似的 SVG 编辑器等工具可让您上传和编辑 SVG 文件。
如何在 Windows 8 / WinRT 中将 SVG 文件转换为 XAML
如何在 Windows 8 / WinRT 中将 SVG 文件转换为 XAML。我是这个 XAML / SVG 环境的新手。所以有人请帮助我在 Windows 8 中实现相同的功能。我需要解析这个 svg 文件并且需要...
我从零经验的网络工作者到现在工作的时间比我愿意承认的要长，这让我失败了。 我想将一个很长的任务 canvas.toBlob(/* jpeg stuff */) 转移给工作人员，但是...
是否有一种语法允许我通过 img 标签的 src 属性中的 id 引用内联 svg？ 或者是否可以将 svg 代码直接回显到 src 属性中？ 我宁愿避免创建...
我有以下六边形的 svg 和旋转动画，目前仅向 1 个方向移动。我将如何调整它，以便它在每个动画周期后旋转另一个方向...
我想要为 svg 图形制作动画。我想为条形图制作动画，以便条形从 0 开始并在 4 秒时达到高度，我似乎无法弄清楚。把它想象成一个加载栏，但是
有什么方法可以通过CSS从SVG背景图像中删除/禁用feFilter吗？
我有一个 SVG 文件（内容如下），其中有一个（fe）过滤器，可以创建“浮雕”外观。我想要它平坦。如果我从 标签中删除 filter=...，我就会得到我想要的....
这可能吗？ 以下是我尝试过的，但它完全用黑色填充了圆圈。 这可能吗？ 以下是我尝试过的，但它完全用黑色填充了圆圈。 <svg id='vizMenu' width="700" height="660"> <defs> <filter id="dropshadow" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> <feOffset dx="0.5" dy="0.8" result="offsetblur"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/> <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/> <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/> </svg> svg 元素的图像填充是通过 SVG 模式... 实现的 <svg width="700" height="660"> <defs> <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> <image x="0" y="0" xlink:href="url.png"></image> </pattern> </defs> <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/> </svg> 嗯，我无法让它与接受的答案一起工作。这就是我最终做到的： <svg width="100" height="100"> <defs> <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100"> <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> </pattern> </defs> <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/> </svg> 如果您想自定义尺寸，请以此作为比例参考： x = 您的首选尺寸 <svg width=">2x" height=">2x"> <defs> <pattern id="image" patternUnits="userSpaceOnUse" height=">2x" width=">2x"> <image x="0" y="0" height="2x" width="2x" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> </pattern> </defs> <circle id='top' cx="x" cy="x" r="x" fill="url(#image)"/> </svg> （此比例适用于方形图像） 通过正确的解释解决了图像重复问题（感谢 AmeliaBR） TL;DR：使用了objectBoundingBox和preserveAspectRatio的概念！ <svg height="10%" width="10%"> <defs> <pattern id="attachedImage" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image xlink:href="url.png" preserveAspectRatio="none" width="1" height="1"/> </pattern> </defs> <circle cx="50%" cy="50%" r="35%" fill="url(#attachedImage)"/> </svg> 我知道这是一个老问题，但我使用了滤镜来覆盖图像。由于缩放，上述解决方案对我不起作用，而且图像似乎是平铺的。我用的是这个，我希望它也能帮助其他人。 <svg width="700" height="660"> <filter id="this_image" x="0%" y="0%" width="100%" height="100%"> <feImage xlink:href="test_image.png"/> </filter> <circle filter="url(#this_image)" cx="180" cy="120" r="80" /> </svg> 这是我的解决方案，不同之处在于它不使用 patternUnits="userSpaceOnUse" 并且您指定图像元素所需的宽度和高度。 <defs> <pattern id="{some name}" x="0" y="0" width="1" height="1"> <image href="{image url}" x="0" y="0" width="{desired width}" height="{desired height}"></image> </pattern> </defs>
影响 HTML 链接元素中的 SVG 图标和文本内容的悬停效果
假设我有以下 HTML： 链接文字 以及以下 CSS： 一个：悬停{ 颜色：#0074D...
我在 Debian 12 系统上使用 gimp 2.10。 我需要使用 gimp，因为在使用 gimp 图形界面进行一些手册测试后，我注意到调整大小/转换后的图像的质量比使用
我以 8.5:11 的比例构建了一个很好的 React 组件，以匹配标准字母页面，现在尝试让用户从浏览器中全尺寸下载和打印它。一直在努力...
我尝试使用 XPath 来选择 svg 元素的 fill 属性值，该值使用 CSS 变量，但我没有得到任何回报。 HTML： 我尝试使用 XPath 选择 svg 元素的 fill 属性值，该值使用 CSS 变量，但我什么也没得到。 HTML： <svg class="unf-icon" viewBox="0 0 24 24" width="24" height="24" fill="var(--N400, #6C727C)" style="display: inline-block; vertical-align: middle;"> <path d="M9.5 18a.999.999 0 01-.71-1.71l4.3-4.29-4.3-4.29a1.004 1.004 0 011.42-1.42l5 5a.998.998 0 010 1.42l-5 5a1 1 0 01-.71.29z"></path> </svg> XPath 尝试： //*[name()='svg' and fill='#6C727C'] //*[name()='svg' and @fill="#6C727C"] //*[name()='svg' and @contain(fill, "#6C727C")] 第三次尝试最接近。 改变 //*[name()='svg' and @contains(fill, "#6C727C")] 到 //*[name()='svg' and contains(@fill, "#6C727C")] 如果您想检查 fill 属性值是否有 "#6C727C" 的子字符串，或 //*[name()='svg' and @fill="var(--N400, #6C727C)"] 如果您想检查 fill 属性值是否完全等于 "var(--N400, #6C727C)" 另请参阅 HTML 5、内联 SVG 和 SVG DOM 的命名空间感知 CSS var()功能
doxygen-使用draw.io从SVG链接到doxygen-ref
我正在尝试创建一个具有可点击元素的 svg 图像，它将引导您到该元素的文档，就像 doxygen 本身中创建的类图一样。 我们也在使用draw...
我最近发现了 CSS resize 属性： div { 调整大小：两者； 溢出：自动； } 还有一个 polyfill，但它们都不适用于 SVG 元素：/ 至少可以吗？
我需要帮助为我的 UI 设计创建特定的 SVG 形状，但我很难仅使用 CSS 或 SVG 路径代码来实现它。 这就是我正在寻找的： 带圆角的矩形。 机器人...