问题标签 [svg-sprite]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 支持复制和粘贴的 Svg 精灵
以下 Emojione 演示建议添加描述标签以允许用户复制和粘贴原始 unicode 字符：
https://demos.emojione.com/latest/sprites-svg.html
但是，在 macOS 上（至少）我无法复制和粘贴鲸鱼（在页面上）。
这是我在我的网站上尝试过的示例代码的变体：
我尝试使用img标签做同样的事情：
但是，图像显示为空白。
html - SVG 使用和渐变作为填充
我一直在尝试将我的 SVG 图标外部化到一个文件中，并使用<svg><use xlink:href="file.svg#icon" /></svg>. 从理论上讲，这非常有效，但是不同的浏览器在渲染方面存在问题。<use>当在文件内部引用符号并直接打开 svg 文件的 url时，所有浏览器都能够正确呈现 svg 。
简而言之，linearGradient在引用标记中的符号时，是否有一种跨浏览器的方法可以让 SVG 充当元素的填充<svg><use/></svg>？
我设置了一个 plunker 来演示这个问题： http ://plnkr.co/edit/feKvZ7?p=preview
简化后，标记如下所示：
SVG 文件如下所示：
这是它在不同浏览器中的样子：
aurelia - Aurelia SVG sprite - 间歇性工作
在 Aurelia 中，我创建了一个自定义组件，用于显示与<use>标签一起克隆的内联 SVG。它似乎间歇性地工作，尤其是在 Aurelia Dialog 中使用它时给我带来了问题。有时图标会加载到 SVG shadow-dom 中；有时它只是空的。我的猜测是它在完成加载 DOM 之前未能克隆 SVG。
HTML 代码：
JavaScript 代码：
SVG-Sprite 代码片段：
svg - SVG sprite 不工作 - 图标显示在堆栈上
受这篇文章How SVG Fragment Identifiers Work的启发，我正在尝试创建 SVG 精灵，并使用 viewBox 将选定的图标作为背景放置到样式表中......
不幸的是，我遇到了一个真正的问题...我无法选择要显示的正确图标，因为所有图标都堆叠在一起并相互覆盖...
我试图使用坐标 x 和 y 来分隔图标组，但在 Web 浏览器中没有结果（它们仍在堆栈上），尽管当我将精灵文件放入 Sketch / AI 时，它们是分开的。
javascript - 为什么 svg sprite 在服务器上不可见。吞咽一切都很好
存在这样一个问题，除了 gulp 本身，svg sprite'y 在任何地方都看不到。这是主机上的内容 ====> https://i.stack.imgur.com/N1Ko8.png
现在包含的 gulp 和一切正常 ===> https://i.stack.imgur.com/MRQ0j.png
将精灵添加到身体的脚本
laravel - 如何在 Laravel MIX 上创建 svg 精灵？
我需要在 laravel mix 上配置构建 SVG 精灵。
我尝试了 webpack 下的几个库，result = 0.
有人可以建议如何配置吗？
在webpack.mix.js或app.js中何处编写处理程序代码？
css - SVG shadow-root 已关闭
我试图用 CSS 为 svg-sprite 设置动画。我创建了一个精灵并从 gulp 注入它：
…并将图像从精灵插入到 HTML：
它运行良好，但下图显示影子 DOM 已关闭。
我如何在没有 JavaScript 的情况下为这个 SVG 的某些样式设置动画？但是如果 JavaScript 是唯一的方法，那么如何做得更好呢？
html - 剪辑路径在 SVG 精灵中不起作用
伙计们，
我在使用具有剪切路径符号的 SVG 精灵时遇到问题。看起来这是一个已知问题，但我无法通过阅读现有文档来找出解决方案。
我有一个名为 icon.svg 的 SVG 精灵文件；其内容如下图：
现在我在我的标记中引用这个 SVG 如下：
第一个正确显示，但第二个没有。在进一步发现后，我发现剪辑路径和 SVG 精灵存在某种问题。
有什么解决方法吗？我做错什么了吗？
svg - 从 gulp-svg-sprite 构建过程中排除 SVG
我目前正在使用 gulp-svg-sprite 构建一个 SVG 图标系统，并且遇到了需要从构建过程中排除一些图标的情况。
有没有办法从这两个管道中排除 SVG？不知何故，我需要获取 src 文件名并将其与要排除的 SVG 进行比较，例如：
我不希望通过 SVGO 和其他插件对需要 2 条可样式化路径的 1-off SVG 优化特定图标。
这是我正在使用的代码：
我是 gulp & node 的新手，所以任何帮助都将不胜感激！
谢谢， - 瑞安
css - 怎么做适用于 external-svg-sprites 和 css-variable？
TL;博士
使用创建symbol-svg-sprite并插入其片段svg+use后，我想css-variables在 #ShadowDOM 中使用 SVGpresentation attributes来更改例如stroke-width="0"，stroke-width="5"并且transition property必须工作，问题是这些stroke-width值在任何情况下都有效（：悬停：活动：焦点）并且transition不工作。
外部 SVG 示例
插入 SVG+USE
应用 CSS 样式
预期行为
当您将鼠标悬停在 svg 容器上时，变量的值会发生变化，并且笔划会stroke-width 0平滑地流入stroke-width 2- 这种情况会发生但没有 分配给它，transition但可以在
DevTools中看到transition<path>
这在哪里工作？
- 通过标签内联 svg
<svg>—<svg> <path d="..."> </svg> <object></object>使用带有外部 css 的标签
演示可以在 CodePen 上看到
如何使CSS transition工作external-svg-sprites？我厌倦了与此作斗争:(