Javascript 当HTML页面中有基本标记时，SVG渐变变为黑色？

我使用Raphaël JavaScript库在HTML页面中创建SVG元素，并使用CodeIgniter作为PHP框架。在CodeIgniter框架中，我需要在HTML文档的头部添加一个

标记，以使用JS、CSS和图像，但这在SVG元素中造成了一个奇怪的问题

---

当我使用

标记时，渐变不起作用。相反，对象将变为黑色。它的行为与图像填充路径对象完全相同。

您的渐变定义已损坏 此外，Opera有时也会出现问题，因为渐变填充对象的某些用法在文档中定义为具有唯一的

id

属性，然后从另一个元素引用为URL。通常，URL只是标识符片段，例如：

...

---

如果引入带有

href

属性的

元素，则会更改文档中此类URL的含义。它们不是相对于当前文档计算的，而是相对于指定的单独URI计算的。

另请参见以下错误报告：

---

显然，对于同样使用history.pushState（）的AJAX风格应用程序来说，通过URL引用（填充渐变或标记端点，我也怀疑）的概念是有问题的。

我有一个类似的问题-渐变在Chrome中呈现为全黑，但我甚至没有

标记

改变

<stop  offset="1" style="stop-color:#F26722"/>

到

似乎解决了这个问题

---

另一个无关的错误是Chrome无法解析

元素上的

transform=“translate（…）”

，我必须将它们移动到单独的

-s中。

是否有任何解决方案将svg从基本标记中排除？无论如何，我将接受您的回答，但如果您知道一种在不删除基本标记的情况下防止此问题的方法，请告诉我tag@AhmetYıldırım您可以尝试使用带有SVG标记的页面的完整URL，例如

fill=“URL”(http://mydomain.com/foo/bar.html#gradient)“

。但是，我建议修复CodeIgniter，使其不需要

标记。为什么需要这样做？使用完整URL不起作用，因为它会发出并读取文件，而不是使用（已修改的）文档当前在DOM中构成。确实需要有一种方法将SVG从HTML

base

标记中分离出来。如果您碰巧使用AngularJS，由于这个问题，他们添加了一个选项以消除对

的需要：请在Opera上在此处提交错误：。请包括一个测试用例或一个链接。谢谢：）正确答案在这里。。。如果使用Angular2，则使用AngularJS的解决方案：

<stop  offset="1" stop-color="#F26722"/>