Support SVG styling of annotations

__tests__/integration/mirador/svg_annos.html

@@ -15,7 +15,7 @@
        id: 'mirador',
        windows: [
          {
-           manifestId: 'https://api.myjson.com/bins/ahd5y',
+           manifestId: 'https://collections.st-andrews.ac.uk/manifest-test/test-manifest.json',
          },
          {
            manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/748a9d50-5a3a-440e-ab9d-567dd68b6abb.json',

__tests__/src/lib/CanvasAnnotationDisplay.test.js

@@ -57,6 +57,7 @@ describe('CanvasAnnotationDisplay', () => {
       const context = {
         restore: jest.fn(),
         save: jest.fn(),
+        setLineDash: jest.fn(),
         stroke: jest.fn(),
         translate: jest.fn(),
       };
@@ -68,8 +69,8 @@ describe('CanvasAnnotationDisplay', () => {
       expect(context.save).toHaveBeenCalledWith();
       expect(context.restore).toHaveBeenCalledWith();
       expect(context.translate).toHaveBeenCalledWith(-100, 0);
-      expect(context.strokeStyle).toEqual('blue');
-      expect(context.lineWidth).toEqual(20);
+      expect(context.strokeStyle).toEqual('#00bfff');
+      expect(context.lineWidth).toEqual(617.4334);
     });
   });
   describe('fragmentContext', () => {

src/lib/CanvasAnnotationDisplay.js

@@ -46,13 +46,27 @@ export default class CanvasAnnotationDisplay {
        *  context.strokeStyle = element.attributes.stroke.nodeValue;
        *  context.lineWidth = element.attributes['stroke-width'].nodeValue;
        */
-      context.strokeStyle = this.color; // eslint-disable-line no-param-reassign
-      context.lineWidth = this.lineWidth(); // eslint-disable-line no-param-reassign
+      this.setupLineDash(context, element.attributes);
+      context.strokeStyle = this.strokeColor( // eslint-disable-line no-param-reassign
+        element.attributes,
+      );
+      context.lineWidth = this.lineWidth( // eslint-disable-line no-param-reassign
+        element.attributes,
+      );
       context.stroke(p);
       context.restore();
     });
   }
 
+  /* eslint-disable  require-jsdoc, class-methods-use-this */
+  setupLineDash(context, elementAttributes) {
+    // stroke-dasharray
+    if (elementAttributes['stroke-dasharray']) {
+      context.setLineDash(elementAttributes['stroke-dasharray'].nodeValue.split(','));
+    }
+  }
+  /* eslint-enable  require-jsdoc, class-methods-use-this */
+
   /** */
   fragmentContext(context) {
     const fragment = this.resource.fragmentSelector;
@@ -64,8 +78,20 @@ export default class CanvasAnnotationDisplay {
   }
 
   /** */
-  lineWidth() {
-    return Math.ceil(10 / (this.zoom * this.width));
+  strokeColor(elementAttributes) {
+    if (elementAttributes && elementAttributes.stroke) {
+      return elementAttributes.stroke.nodeValue;
+    }
+    return this.color;
+  }
+
+  /** */
+  lineWidth(elementAttributes) {
+    let calculatedWidth = Math.ceil(10 / (this.zoom * this.width));
+    if (elementAttributes && elementAttributes['stroke-width']) {
+      calculatedWidth *= elementAttributes['stroke-width'].nodeValue;
+    }
+    return calculatedWidth;
   }
 
   /** */