Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UstO6zAQ/ZWR2dwrNbH74BUCAlb8AZtsQjJtTeOHbLelQv13xnFbAghWOXPmZM7xaN7Zg7X5Zo2sYGVAZbs64F2lAUq/WcBG4vbRvN1WTICAcyFgMhEV6wUkaXHuD5gqVbsVOpAtyROuGCTwLNuwJPrqxDyhXCzDgXI4jx6zBHcJngbT6Ea6pkNojqrmoAFH33F+TuqSJ9FnHp6cjmH5IG1pTbfrpEawRurg4xQxGguYidFMAOHLHo/pxbExTdVFqq7jCkp+nJHWxWlfhEo+2CKVPuwouG+MxZaYk+97/MkHZ1ZYwNm4vp6005tPLtvGjRWQuLnsugK00diX6V2ZD7ULBaxd9+8sUf+HbSXb35uofzb3MX2fl4KyEZPKGhcyVdv81RtNF9KHrg4NX7EiPSNydEKxrtgyBOsLztfarhZ5YxS/px53ax2kwqw16n6aT/LpJW+lD0M+R6+yF2e2Hh05Vmw0GM6J3FBwR8nRxdP6w+yb9ovht94P0+hJm9iz/Qc54v8E

Steps to reproduce

There are no steps needed to reproduce the bug. The wrongly rendered SVG is already visible.

What is expected?

I expect that all markers are on polyline edges.

What is actually happening?

Actually, all markers are shifted away from the polyline edges.

System Info

System:
  OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
  Shell: 5.0.17 - /bin/bash
Binaries:
  Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
  npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Browsers:
  Firefox: 103.0
npmPackages:
  vue: ^3.2.37 => 3.2.37

Any additional comments?

Same problem occurs with Chromium Version 103.0.5060.134 (Offizieller Build) snap (64-Bit).

When using https://vuejs.org/examples/#hello-world without SFC the bug does not appear!

<script type="module">
import { createApp } from 'vue'
createApp().mount('#app')
</script>

<div id="app">
  <svg viewBox="0 0 500 220">
    <defs>
      <marker id="marker" markerWidth="8" markerHeight="8" refx="4" refy="4">
        <circle cx="4" cy="4" r="1.5"></circle>
      </marker>
    </defs>
    <polyline points="10,10 40,40 10,70 40,100 10,130 40,160 10,190"></polyline>
  </svg>
</div>

<style scoped>
polyline {
  stroke: #1a92d3;
  stroke-width: 3;
  fill: none;
  marker-start: url(#marker);
  marker-mid: url(#marker);
  marker-end: url(#marker);
}
</style>

svg attributes are case sensitive

update to refX and refY

      <marker id="marker" markerWidth="8" markerHeight="8" refX="4" refY="4">

@lidlanca Thanks in advance!