diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index fb224ef..682991b 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -96,6 +96,7 @@
   monthCutTip: 'Last 1 month',
   serverZone: 'Server Zone',
   percentResponse: 'Percent Response',
+  download: 'Dowanload',
 };
 
 export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 11b15d8..71de156 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -96,6 +96,7 @@
   monthCutTip: '最近1月',
   serverZone: '服务器时区',
   percentResponse: '百分比响应',
+  download: '导出为图片',
 };
 
 export default m;
diff --git a/src/views/components/trace/d3-trace.js b/src/views/components/trace/d3-trace.js
index 8f3a2b7..a7535b3 100644
--- a/src/views/components/trace/d3-trace.js
+++ b/src/views/components/trace/d3-trace.js
@@ -37,6 +37,7 @@
     this.svg = d3
       .select(this.el)
       .append('svg')
+      .attr('class', 'trace-list-dowanload')
       .attr('width', this.width)
       .attr('height', this.height);
     this.treemap = d3.tree().size([this.height * 0.7, this.width]);
@@ -76,6 +77,7 @@
     this.svg
     .append('g')
     .attr('class','trace-xaxis')
+    
     .attr('transform', `translate(${this.width * 0.618 -20 },${30})`)
     .call(this.xAxis);
     this.sequentialScale = d3
@@ -133,7 +135,8 @@
       .attr('rx',2)
       .attr('y', -22)
       .attr('x', 20)
-      .attr('width', '100%');
+      .attr('width', '100%')
+      .attr('fill', 'rgba(0,0,0,0)');
     nodeEnter
       .append('text')
       .attr('x', 13)
@@ -204,7 +207,7 @@
       .attr('fill', d =>
         d._children
           ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
-          : ''
+          : 'rbga(0,0,0,0)'
       )
       .style(
         'stroke',
@@ -245,6 +248,9 @@
       .enter()
       .insert('path', 'g')
       .attr('class', 'trace-link')
+      .attr('fill', 'rgba(0,0,0,0)')
+      .attr('stroke', 'rgba(0, 0, 0, 0.1)')
+      .attr('stroke-width', 2)
       .attr('d', d => {
         const o = { x: source.x0 + 35, y: source.y0 };
         return this.diagonal({ source: o, target: o });
diff --git a/src/views/components/trace/trace-detail-chart-list.vue b/src/views/components/trace/trace-detail-chart-list.vue
index c0c5fa9..c005a25 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -22,7 +22,7 @@
         <use xlink:href="#spinner"></use>
       </svg>
     </div>
-    <transition-group name="fade" tag="div" class="mb-5">
+    <transition-group name="fade" tag="a" class="mb-5">
       <span class="time-charts-item mr-10" v-for="(i,index) in list" :key="i" :style="`color:${computedScale(index)}`">
          <svg class="icon vm mr-5 sm">
             <use xlink:href="#issue-open-m"></use>
@@ -30,6 +30,7 @@
         <span>{{i}}</span>
       </span>
     </transition-group>
+    <a class="rk-btn r vm  tc" @click="downloadTrace">{{$t('download')}}</a>
     <rk-sidebox :width="'50%'" :show.sync="showDetail" :title="$t('spanInfo')">
       <div class="rk-trace-detail">
         <h5 class="mb-15">{{$t('tags')}}.</h5>
@@ -285,6 +286,28 @@
         ],
       })
     },
+    downloadTrace() {
+      let serializer = new XMLSerializer();
+      let svgNode = d3.select('.trace-list-dowanload').node();
+      let width = d3.select('.trace-list-dowanload')._groups[0][0].clientWidth;
+      let height = d3.select('.trace-list-dowanload')._groups[0][0].clientHeight;
+      let source = serializer.serializeToString(svgNode); 
+      source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+      let url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);  
+      let canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height; 
+      let context = canvas.getContext("2d");
+      let image = new Image;
+      image.src = url;
+      image.onload = function() {
+          context.drawImage(image, 0, 0);
+          var a = document.createElement("a");
+          a.download = "trace-list.png";
+          a.href = canvas.toDataURL("image/png");
+          a.click();
+      }
+    }
   }
 };
 </script>
@@ -312,11 +335,6 @@
   pointer-events: none;
 }
 .domain{display: none;}
-.trace-link {
-  fill: none;
-  stroke: rgba(0,0,0,0.1);
-  stroke-width: 2px;
-}
 .time-charts-item{
   display: inline-block;
   padding: 2px 8px;