问题标签 [inline-svg]

我已经获得了这个内联 SVG 剪辑路径，可以在 CodePen 上的 Chrome 和 Firefox 中工作，但是当我尝试在我的本地主机上隐含它时，它不再在 Firefox 中工作了。它在 Chrome 中的本地主机上仍然可以正常工作，所以我确定它与 url 无关？

这是代码笔：

代码笔

这是我第一次使用 SVG，我想知道是否可以创建带有箭头的动画折线图。我发现了多个不带箭头的动画线图、带箭头的非动画线图和带箭头的动画直线的多个示例，但并不完全符合我的要求。我在下面附上了一些我一直在玩的 codepen 示例。有谁知道这是否可能/有解决方案？这将不胜感激！

1. 动画线缺失箭头（需要箭头）： http ://codepen.io/alexandraleigh/pen/jVaObd

   /li>

2. 带箭头的动画直线（需要在路径上的多个点停止）： http ://codepen.io/alexandraleigh/pen/yVPYrY

3. 我尝试添加从 #1 到 #2 的路径描述，它具有所需的最终图形，只是没有动画： http ://codepen.io/alexandraleigh/pen/pNdgWR

4. 我还尝试将箭头标记从 #2 添加到 #1，但箭头没有动画： http ://codepen.io/alexandraleigh/pen/aBVdVY

我也愿意使用诸如http://snapsvg.io/之类的插件，但还没有看到任何有助于我的情况的工作示例。

我们在应用程序中大量使用内联 SVG。最近我发现了不需要的行为（尤其是在 Firefox 中，但我在 Chrome 中看到了类似的问题），其中来自不同 svg 的样式可能会相互干扰。我将我当前的问题追踪到使用“显示：无”。

为了说明我的问题，请参阅下面附加的 HTML。这包含两个圆形的德国国旗，第一个是隐藏的。在 chrome 中，您会看到一个圆形的德国国旗（这是正确的）。在 Firefox 中，您会看到一个方形的德国国旗（这是不正确的）。如果您删除第一个 div 上的 display: none，则两个标志都正确显示（圆形），或者如果您删除整个第一个 div，第二个标志将正确显示（圆形）。

为什么在第一次出现 svg 时显示 none 导致第二次出现错误？

我想我可以通过在两个 svg 中使用不同的 id 来解决这个问题，但是由于我想将它们包含在一个包含内联 svg 的通用 html 文件中的多个页面上，所以目前这是非常不切实际的。

我无法让 Firefox 从外部文件打印 svg。

我有一个带有很多不同图标的 icons.svg 文件。我使用以下代码将它们嵌入到页面中：

我的 icons.svg 看起来像这样：

在 Chrome 中，一切正常，在 Firefox 中，它是空白的。我也在使用 svgxuse polyfill，但无论有没有它我都有同样的问题。

您可以使用以下链接作为示例，在 Firefox 中没有 SVG 的打印：

https://icomoon.io/svgxuse-demo/

我正在使用 Firefox v50。

我在标记中使用了内联 SVG 图标（只是一个简单的勾号）。原因是，根据我从服务器获得的数据，我需要更改fill图标的颜色。img当需要它作为css或标签中的图像时，我无法做到这一点。到目前为止，这是我拥有的标记：

和 CSS：

这样，无论是否支持 SVG，都将请求图像。所以我想知道是否有任何方法可以将图标显示为 SVG 并仅在不支持 SVG 的情况下请求 png 图标。

顺便说一句，我使用的图片大小没有，但我在带有 JS 框架的组件中使用它。因此，每次在我的应用程序中创建组件时，它都会发送对 png 文件的请求，这让我很困扰。

我想将 SVG 图像附加到我的 HTML 并让 SVG 中的 JavaScript 执行。

假设我想获取这张图片并将其放入我的 HTML 中，如下所示：

小提琴

SVG 图像的脚本标签中有一个 console.log() 和一个 alert()。这些在查看图像时执行得很好，但在通过 JavaScript 将图像附加到 HTML 时就不行了。有没有办法做到这一点并让 JavaScript 执行？

我知道如果我要嵌入图像它们会执行，但我需要用 JavaScript 内联它。

在我的项目中，我使用 Inline svgs 如下：

HTML

JS

内联-svg.html

这是小提琴

上面创建的指令仅适用于 Chrome 和 IE10，但不适用于Firefox (v 50.1.0)。

如果我添加没有指令的内联 SVG，它在 Firefox 中运行良好。请帮助我使指令即使在 Firefox 中也能正常工作。

我想使用像图像全角三角形图像这样的形状的 svg 代码， 如何使用这个 svg 来填充浏览器？这是它的代码

这是一个奇怪的问题，我在寻找可能的解决方案时遇到了问题。

我正在开发一个 React/Redux/Webpack 项目，我们正在使用react-inlinesvg它来处理 svg。

问题：

有时我正在开发的应用程序会呈现错误的 svg。这是一个带有示例的img：

行为示例

正确的图标是顶层和底部的图标（编辑和关闭/擦除按钮）但是如果您查看中间的图层，则呈现的图标不是正确的图标。

重要信息：

如果我执行更新出现 svg 图标的组件的操作，我可以重现此行为，但并非所有出现错误，只有 1 或 2 个随机 div。如果我刷新页面，图标会以正确的方式显示。

这是使用 react-inlinesvg 的组件：

我想请您帮助了解为什么会发生这种情况以及可能的解决方案？

是否与 react 更新组件的方式有关？任何服务器问题/缓慢？

我可以给你什么其他信息来帮助你帮助我？

感谢您的时间和帮助！

I've created a vector image, which I'd like to use as a hero for my website. It should fill out the width and height of the viewport at all resolutions.

Furthermore I need to be able to animate the SVG's elements via CSS or JavaScript, so inserting it as a css background or an img isn't an option (at least as far as I know).

Do you guys know a way to solve this? This image shows, what I'd like to achieve:

Any help would be greatly appreciated!