diff --git a/src/barnote.ts b/src/barnote.ts
index 5432e5a990..31b12bd36b 100644
--- a/src/barnote.ts
+++ b/src/barnote.ts
@@ -30,6 +30,7 @@ export class BarNote extends Note {
   protected metrics: { widths: Record<string, number> };
   // Initialized by the constructor via this.setType(type)
   protected type!: BarlineType;
+  public barline!: Barline;
 
   constructor(type: string | BarlineType = BarlineType.SINGLE) {
     super({ duration: 'b' });
@@ -52,6 +53,7 @@ export class BarNote extends Note {
     // Tell the formatter that bar notes have no duration.
     this.ignore_ticks = true;
     this.setType(type);
+    this.barline = new Barline(type);
   }
 
   /** Get the type of bar note.*/
@@ -86,9 +88,13 @@ export class BarNote extends Note {
     const ctx = this.checkContext();
     L('Rendering bar line at: ', this.getAbsoluteX());
     this.applyStyle(ctx);
-    const barline = new Barline(this.type);
-    barline.setX(this.getAbsoluteX());
-    barline.draw(this.checkStave());
+
+    ctx.openGroup('barnote', this.getAttribute('id'));
+    this.barline.setType(this.type);
+    this.barline.setX(this.getAbsoluteX());
+    this.barline.draw(this.checkStave());
+    ctx.closeGroup();
+
     this.restoreStyle(ctx);
     this.setRendered();
   }
diff --git a/tests/barline_tests.ts b/tests/barline_tests.ts
index a197b8435b..2a57930b87 100644
--- a/tests/barline_tests.ts
+++ b/tests/barline_tests.ts
@@ -5,6 +5,7 @@
 
 import { TestOptions, VexFlowTests } from './vexflow_test_helpers';
 
+import { Renderer } from '../src';
 import { Barline, BarlineType } from '../src/stavebarline';
 
 const BarlineTests = {
@@ -44,6 +45,12 @@ function simple(options: TestOptions): void {
   f.Formatter().joinVoices([voice]).formatToStave([voice], stave);
   f.draw();
 
+  if (options.backend === Renderer.Backends.SVG) {
+    notes.forEach((note) => {
+      options.assert.notEqual(note.getSVGElement(), undefined);
+    });
+  }
+
   options.assert.ok(true, 'Simple Test');
 }