--- a/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Tue Mar 14 00:12:26 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Tue Mar 14 11:08:05 2017 +0100
@@ -1,20 +1,25 @@
 <template>
-    <g ref="g" filter="url(#shadow)">
-        <path ref="path" v-bind:d="path"
-            class="path"
-            v-bind:stroke-width="handlerRadius / 2"
-            filter="url(#shadow)"></path>
-        <circle ref="handlers"
-            v-for="(point, key) in points"
-            :key="key"
-            v-show="!readonly"
-            v-bind:data-key="key"
-            v-bind:cx="point.x"
-            v-bind:cy="point.y"
-            v-bind:r="handlerRadius"
-            v-bind:stroke-width="handlerRadius / 2"
-            v-bind:class="{ handler: true, 'handler--first': key === 0 &amp;&amp; !closed }"></circle>
-    </g>
+    <svg>
+        <defs>
+            <path v-bind:id="annotationHref" ref="path" v-bind:d="path"
+                class="path"
+                v-bind:stroke-width="handlerRadius / 2"></path>
+        </defs>
+        <g ref="g" filter="url(#shadow)">
+            <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="(handlerRadius / 2) * 2" class="stroke-bg" />
+            <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="handlerRadius / 2" class="stroke-fg" />
+            <circle ref="handlers"
+                v-for="(point, key) in points"
+                :key="key"
+                v-show="!readonly"
+                v-bind:data-key="key"
+                v-bind:cx="point.x"
+                v-bind:cy="point.y"
+                v-bind:r="handlerRadius"
+                v-bind:stroke-width="handlerRadius / 2"
+                v-bind:class="{ handler: true, 'handler--first': key === 0 &amp;&amp; !closed }"></circle>
+        <g>
+    </svg>
 </template>
 
 <script>
@@ -28,8 +33,8 @@
         props: [
             'paper',
             'original-annotation',
+            'original-path',
             'readonly',
-            'original-path'
         ],
         data() {
             return {
@@ -39,6 +44,18 @@
                 handlerRadius: 30
             }
         },
+        computed: {
+            annotationHref: function() {
+                if (this.originalAnnotation) {
+                    return 'annotation-path-' + this.originalAnnotation.annotation_guid;
+                } else {
+                    return 'annotation-path-new';
+                }
+            },
+            annotationSelector: function() {
+                return '#' + this.annotationHref;
+            }
+        },
         mounted() {
             if (this.originalPath) {
                 this.fromSVGPath(this.originalPath, false);
@@ -196,16 +213,26 @@
 .handler {
     fill: #fff;
     stroke: #000;
-    opacity: 0.9;
 }
 .path {
+    stroke: inherit;
+    stroke-width: inherit;
+    fill: inherit;
+    transform: inherit;
+}
+.stroke-fg {
     stroke: #000;
     fill: transparent;
 }
-.path:hover {
+.stroke-fg:hover {
     cursor: pointer;
     fill: #333;
     opacity: 0.5;
+    stroke-opacity: 1;
+}
+.stroke-bg {
+    stroke: #fff;
+    fill: transparent;
 }
 .handler--first {
     fill: yellow;