从另一个SVG引用SVG定义

时间:2014-04-25 09:32:03

标签: svg

我遇到SVG使用元素的问题。让我们从示例中了解

Svg1.svg

<?xml version="1.0"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75"
       fill="none" stroke="purple" stroke-width="4"/>
       <radialGradient id="irisGradient">
        <stop offset="25%" stop-color="green" />
        <stop offset="100%" stop-color="dodgerblue" />
       </radialGradient>
       <g id="eye">
         <ellipse cy="50" rx="50" ry="25" fill="none" stroke="black"/>
         <circle cy="50" r="25"/>
         <circle cy="50" r="10" fill="black"/>
      </g>
    </defs>
  </svg>

从上面的svg我想在另一个SVG文件中引用符号

SVG2.svg

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g>
     <use xlink:href="Svg1.svg#eye" x="125" fill="url(Svg1.svg#irisGradient)"/>
     <use xlink:href="Svg1.svg#eye" x="250" fill="dodgerblue"/>
     <use xlink:href="Svg1.svg#lens"/>
     <use xlink:href="Svg1.svg#lens" x="125"/>
     <line x1="65" y1="50" x2="310" y2="50"
          stroke="plum" stroke-width="2"/>
  </g>
</svg>

SVG2.svg在Mozilla中工作正常,但在IE9和Chrome中它无效。 IE9和Chrome是否支持从其他svg引用符号,或者我的代码中有什么问题?

1 个答案:

答案 0 :(得分:0)

请从链接中删除[Svg1.svg]

df_raw = df.reset_index()
df_raw.groupby(df_raw.index // 2).max().set_index('index') 
#                 Date_Time_UTC  Latitude_deg  Longitude_deg
#index                                                      
#14     2019-04-02 13:39:59.497     28.563535      77.085489