Merge pull request #241 from antvis/fix-issue-240

fix(g-svg): should get correct path for marker

packages/g-canvas/tests/bugs/issue-227-spec.js

@@ -15,7 +15,7 @@ describe('#187', () => {
 
   const el = canvas.get('el');
 
-  it.only('event delegation on shape should be effective', () => {
+  it('event delegation on shape should be effective', () => {
     const group = canvas.addGroup({
       name: 'group',
     });

packages/g-svg/src/shape/marker/index.ts

@@ -36,7 +36,7 @@ class Marker extends ShapeBase {
     const attrs = this.attrs;
     const x = attrs.x;
     const y = attrs.y;
-    const r = attrs.radius;
+    const r = attrs.r;
     const symbol = attrs.symbol || 'circle';
     let method;
     if (isFunction(symbol)) {

packages/g-svg/tests/bugs/issue-240-spec.js

@@ -0,0 +1,34 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+
+describe('#240', () => {
+  const canvas = new Canvas({
+    container: dom,
+    width: 600,
+    height: 600,
+  });
+
+  it('should get correct path for marker', () => {
+    const shape = canvas.addShape('marker', {
+      attrs: {
+        lineWidth: 1,
+        fill: '#1890ff',
+        r: 16.6,
+        opacity: 0.3,
+        x: 247.22381317138678,
+        y: 153.66500000000002,
+        symbol: 'circle',
+      },
+    });
+
+    const el = shape.get('el');
+    const path = el.getAttribute('d');
+    expect(path).eqls(
+      'M 247.22381317138678 153.66500000000002m -16.6 0a 16.6 16.6 0 1 0 33.2 0a 16.6 16.6 0 1 0 -33.2 0'
+    );
+  });
+});

packages/g-svg/tests/unit/shape/marker-spec.js

@@ -13,7 +13,7 @@ describe('SVG Marker', () => {
       attrs: {
         x: 20,
         y: 20,
-        radius: 10,
+        r: 10,
         fill: 'red',
         symbol: 'circle',
       },
@@ -24,7 +24,7 @@ describe('SVG Marker', () => {
   it('init', () => {
     expect(marker.attr('x')).eql(20);
     expect(marker.attr('y')).eql(20);
-    expect(marker.attr('radius')).eql(10);
+    expect(marker.attr('r')).eql(10);
     expect(marker.attr('fill')).eql('red');
     expect(marker.attr('symbol')).eql('circle');
   });
@@ -49,9 +49,9 @@ describe('SVG Marker', () => {
   });
 
   it('change', () => {
-    expect(marker.attr('radius')).eql(10);
-    marker.attr('radius', 20);
-    expect(marker.attr('radius')).eql(20);
+    expect(marker.attr('r')).eql(10);
+    marker.attr('r', 20);
+    expect(marker.attr('r')).eql(20);
     const bbox = marker.getBBox();
     expect(isNumberEqual(bbox.minX, 0)).eql(true);
     expect(isNumberEqual(bbox.minY, 0)).eql(true);