svg 相关问题

通过 img src 属性中的 id 引用内联 svg

是否有一种语法允许我通过 img 标签的 src 属性中的 id 引用内联 svg？ 或者是否可以将 svg 代码直接回显到 src 属性中？ 我宁愿避免创建...

如何创建一个旋转动画，在每个周期中连续切换方向？

我有以下六边形的 svg 和旋转动画，目前仅向 1 个方向移动。我将如何调整它，以便它在每个动画周期后旋转另一个方向...

SVG 图动画 HTML

我想要为 svg 图形制作动画。我想为条形图制作动画，以便条形从 0 开始并在 4 秒时达到高度，我似乎无法弄清楚。把它想象成一个加载栏，但是

有什么方法可以通过CSS从SVG背景图像中删除/禁用feFilter吗？

我有一个 SVG 文件（内容如下），其中有一个（fe）过滤器，可以创建“浮雕”外观。我想要它平坦。如果我从 标签中删除 filter=...，我就会得到我想要的....

将背景图像 (.png) 添加到 SVG 圆形

这可能吗？ 以下是我尝试过的，但它完全用黑色填充了圆圈。 这可能吗？ 以下是我尝试过的，但它完全用黑色填充了圆圈。 <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...

使用 gimp 脚本调整 SVG 图像大小并转换它

我在 Debian 12 系统上使用 gimp 2.10。 我需要使用 gimp，因为在使用 gimp 图形界面进行一些手册测试后，我注意到调整大小/转换后的图像的质量比使用

打印并下载 React 组件到纸张的完整尺寸

我以 8.5:11 的比例构建了一个很好的 React 组件，以匹配标准字母页面，现在尝试让用户从浏览器中全尺寸下载和打印它。一直在努力...

基于属性值的SVG元素的XPath？

我尝试使用 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...

在 JS 中相当于应用于 SVG 元素的调整 CSS 大小

我最近发现了 CSS resize 属性： div { 调整大小：两者； 溢出：自动； } 还有一个 polyfill，但它们都不适用于 SVG 元素：/ 至少可以吗？

如何创建带有圆角和缩进右下角的 SVG 形状

我需要帮助为我的 UI 设计创建特定的 SVG 形状，但我很难仅使用 CSS 或 SVG 路径代码来实现它。 这就是我正在寻找的： 带圆角的矩形。 机器人...

使用 jQuery 创建模式并重复到画布中

我正在研究画布上 SVG 的图案放置算法，它将是一个 WordPress 插件。我可以将 SVG 放在画布上并计算宽度和高度值，但是，因为 SVG h...

剪辑路径宽度不是 100% 宽度

您好，我正在使用光滑的滑块，我想对容器进行剪辑路径，但剪辑路径效果不佳。 这是我的 svg 路径 <

SVG 笔划显示不需要的点。在figma中没有看到

点的照片 当我从 Figma 导出 SVG 时，它在特定路径的笔划中给出了这个不需要的小点。 点的照片 当我从 Figma 导出 SVG 时，它在特定路径的笔划中给出了这个不需要的小点。 <svg width="33" height="38" viewBox="0 0 33 38" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M29.4874 5.96259C29.185 4.56022 28.3062 3.5063 27.0896 2.95241C26.005 2.4586 24.8396 2.44183 23.8865 2.56268C21.9671 2.80607 19.8967 3.73641 18.2979 4.85872C18.1219 4.98229 17.613 5.20669 16.6039 5.39113C15.6562 5.56436 14.4991 5.66288 13.2344 5.7034C10.7078 5.78434 8.0053 5.62774 6.16576 5.5055C5.32871 5.44988 4.51956 5.81779 4.01123 6.48514C3.50291 7.15249 3.36318 8.0303 3.63917 8.8225C4.71631 11.9142 5.5 15.2666 5.5 18.5C5.5 23.1366 4.75649 27.3225 2.81385 30.8244C2.33564 31.6865 2.40866 32.7491 3.0003 33.5376C3.59194 34.3261 4.59172 34.6933 5.55309 34.4752C10.7908 33.287 17.524 30.4418 22.595 25.8288C27.7383 21.1501 31.3214 14.4693 29.4874 5.96259ZM29.4874 5.96259L27.0483 6.48844L29.4874 5.96258C29.4874 5.96258 29.4874 5.96259 29.4874 5.96259Z" fill="url(#paint0_linear_43_112)" stroke="#63310E" stroke-width="5" stroke-linejoin="round"/> <defs> <linearGradient id="paint0_linear_43_112" x1="16.2359" y1="5" x2="16.2359" y2="32.0372" gradientUnits="userSpaceOnUse"> <stop stop-color="#E76B13"/> <stop offset="1" stop-color="#813C0B"/> </linearGradient> </defs> </svg> 我正在尝试为一个名为 Ducky 的小团体制作一个徽标。我希望它能像 Figma 中那样显示笔画。 看起来怎么样 这是你在svg代码中添加的一小段造成的 <svg width="33" height="38" viewBox="0 0 33 38" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M29.4874 5.96259C29.185 4.56022 28.3062 3.5063 27.0896 2.95241C26.005 2.4586 24.8396 2.44183 23.8865 2.56268C21.9671 2.80607 19.8967 3.73641 18.2979 4.85872C18.1219 4.98229 17.613 5.20669 16.6039 5.39113C15.6562 5.56436 14.4991 5.66288 13.2344 5.7034C10.7078 5.78434 8.0053 5.62774 6.16576 5.5055C5.32871 5.44988 4.51956 5.81779 4.01123 6.48514C3.50291 7.15249 3.36318 8.0303 3.63917 8.8225C4.71631 11.9142 5.5 15.2666 5.5 18.5C5.5 23.1366 4.75649 27.3225 2.81385 30.8244C2.33564 31.6865 2.40866 32.7491 3.0003 33.5376C3.59194 34.3261 4.59172 34.6933 5.55309 34.4752C10.7908 33.287 17.524 30.4418 22.595 25.8288C27.7383 21.1501 31.3214 14.4693 29.4874 5.96259Z" fill="url(#paint0_linear_43_112)" stroke="#63310E" stroke-width="5" stroke-linejoin="round"/> <defs> <linearGradient id="paint0_linear_43_112" x1="16.2359" y1="5" x2="16.2359" y2="32.0372" gradientUnits="userSpaceOnUse"> <stop stop-color="#E76B13"/> <stop offset="1" stop-color="#813C0B"/> </linearGradient> </defs> </svg> 具体细分 ” L27.0483 6.48844“

Laravel 项目中 AdminLTE 和 Bootstrap 分页按钮中不需要的 SVG 图标

我在 Laravel 项目中使用 AdminLTE 和 Bootstrap，并且遇到了 SVG 图标（左箭头和右箭头）出现在我的分页按钮中的问题。这些 SVG 图标似乎有所不同...

SVG 在 Safari 上不显示

我从 Figma 将图像导出为 SVG，它结合了其他 11 个图像来制作这个拼贴画。它不会在 Safari 上呈现。在我的 MacBook 和 iPhone 上都没有，但在 Chrome 上渲染得很好。怎么了...

如何缩放`clip-path：path`？

我有一个剪辑路径，可以切割某种形状。问题是它是用绝对坐标设置的。如果我把 % 放在那里，它就会崩溃。如何缩放它以使其适合画布边框并伸展...

使用 SVG 路径作为另一条路径（弯曲路径）的“骨架”

我正在尝试在路径上实现这种弯曲效果，此效果采用现有路径（骨架）并允许人们在形状路径中“弯曲”它。弯曲路径的样式取自

HTML 页面可以从文件夹访问 SVG，但无法加载它们

我目前正在使用 HTML 制作游戏，我设置了一个临时页面来测试某些功能是否有效。我试图通过输入 JavaScript 将文件夹中的一些 SVG 文件放在我的 HTML 网站上： 我目前正在使用 HTML 制作游戏，我设置了一个临时页面来测试某些功能是否有效。我试图通过输入 JavaScript 将文件夹中的一些 SVG 文件放在我的 HTML 网站上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Gallery</title> </head> <body> <h1>SVG Gallery</h1> <div id="svg-container"></div> <script> async function fetchSVGs() { try { const response = await fetch('/assets/svg/props/items'); const text = await response.text(); // This will parse the directory listing to extract SVG file names. const parser = new DOMParser(); const doc = parser.parseFromString(text, 'text/html'); const links = Array.from(doc.querySelectorAll('a')) .filter(link => link.href.endsWith('.svg')); // Load each SVG file dynamically const container = document.getElementById('svg-container'); links.forEach(link => { const svgPath = link.getAttribute('href'); const img = document.createElement('img'); img.src = svgPath; container.appendChild(img); }); } catch (error) { console.error('Error loading SVGs:', error); } } fetchSVGs(); </script> </body> </html> 如您所见，我想将它们全部列出在页面上。它确实设法进入项目文件夹并查看其中的所有项目，但无法加载它们。上面说 Failed to load resource: the server responded with a status of 404 以下是我的文件夹中的项目以及访问它们但未加载图像的系统： 在此输入图片描述 在此输入图片描述 404错误通常发生在文件路径错误时。请检查您的文件是否正确。如果您的 HTML 文件位于根目录中，请确保 assets/svg/props/items 文件夹结构与此匹配。 如果您有已知的 SVG 文件名列表，则可以使用 JavaScript 为每个文件动态添加元素。 <script> // List of SVG filenames const svgFiles = ['image1.svg', 'image2.svg', 'image3.svg']; const folderPath = '/assets/svg/props/items/'; const container = document.getElementById('svg-container'); svgFiles.forEach(file => { const img = document.createElement('img'); img.src = folderPath + file; img.alt = file; // Optional alt attribute for accessibility container.appendChild(img); }); </script>