如何正确获取svg样式并附加到Raphael？

Question

我有一个svg文件并使用Raphael库。我的svg文件包含以下样式：

<defs>
  <style type="text/css">
   <![CDATA[
    .fil1 {fill:#2B2A29}
    .fil0 {fill:#009846;fill-opacity:1}
    .fnt0 {font-weight:bold;font-size:10.9996;font-family:'Arial'}
   ]]>
  </style>
  <filter id="Filter" filterUnits="userSpaceOnUse" x="0" y="0" width="660" height="400">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feOffset in="blur" dx="0" dy="3" result="offsetBlur"/>
    <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
 </defs>

要将此svg文件转换为Raphael我使用this在线工具。这个工具不会插入我的风格。我得到以下标记：

<svg height="400" version="1.1" width="660" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc>Created with RaphaГ«l 2.1.0</desc><defs/><path style="stroke-opacity: 1;" fill="#000000" stroke="#000000" d="M296,116L297,118L343,124L375,105L366,94L339,88L320,98L319,98Z" stroke-width="0" stroke-opacity="1"/>

...

正如您所见，defs标记为空。

我尝试过手动添加样式：

$('defs').append('<style type="text/css"><![CDATA[.fil1 {fill:#2B2A29}.fil0 {fill:#009846;fill-opacity:1}.fnt0 {font-weight:bold;font-size:10.9996;font-family:'Arial'}]]></style><filter id="Filter" filterUnits="userSpaceOnUse" x="0" y="0" width="660" height="400"><feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/><feOffset in="blur" dx="0" dy="3" result="offsetBlur"/><feMerge><feMergeNode in="offsetBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>');

但是，我收到了错误：

missing ) after argument list

...ght:bold;font-size:10.9996;font-family:'Arial'}]]></style><filter id="Filter" fi...

如何正确获取svg样式并附加Raphael？