arrowHead of line is not correctly placed when x2 and y2 attributes are driven by measurements

[bijwaard]

When attributes are driven by measurements, the arrowhead is not correctly driven from measurements. When comparing original SVG and modified SVG, I noticed that the defined markers miss the attributes refX="1.5" refY="1.5". The refX and refY define the point of attachment of the marker to the line.

Here is the relevant part of the original SVG:

    <defs>
      <marker id="markerArrowRed" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5" orient="auto">
          <path d="M1,0 L1,3 L2,1.5 L1,0" style="fill: red" />
      </marker>
    </defs>
     <g>
      <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 3px; stroke: red; marker-end: url(#markerArrowRed);"       id="L1" />
     </g>

This is the SVG after modification (obtained through firefox inspect):

    <defs>
      <marker orient="auto" id="markerArrowRed">
          <path style="fill: red" d="M1,0 L1,3 L2,1.5 L1,0"></path>
      </marker>
     <g>
      <line id="L1" style="stroke-width: 3px; stroke: red; marker-end: url(&quot;#markerArrowRed&quot;); white-space: pre;" y2="86.40646423489822" x2="105.41752351150924" y1="100" x1="100"></line>
     </g>

I can reproduce the wrong placement of the arrowhead with SVG editor inkscape.

Originally posted by @bijwaard in https://github.com/andymchugh/andrewbmchugh-flow-panel/issues/67#issuecomment-2288098041

[bijwaard]

As a work-around, I tried to drive marker refX and refY from formula, but this is not allowed, probably because they are in the SVG definition section.

  markerArrowRed:
    bespoke:
      formulas:
      - "ref = 1.5"
      drives:
      - elementName: "marker"
        attribsSet:
          refX: "ref"
          refY: "ref"

attribute drive [ refX ] not allowed on element 
<marker id="markerArrowRed" orient="auto">
module.js:2:766239

object:
<marker xmlns="http://www.w3.org/2000/svg" orient="auto" id="markerArrowRed" style="white-space: pre;">
          <path style="fill: red; white-space: pre;" d="M1,0 L1,3 L2,1.5 L1,0" id="markerArrowRed@flowrpt0"/>
      </marker>

attribute drive [ refY ] not allowed on element 
<marker id="markerArrowRed" orient="auto">
module.js:2:766239

object:
<marker xmlns="http://www.w3.org/2000/svg" orient="auto" id="markerArrowRed" style="white-space: pre;">
          <path style="fill: red; white-space: pre;" d="M1,0 L1,3 L2,1.5 L1,0" id="markerArrowRed@flowrpt0"/>
      </marker>

[andymchugh]

This is an issue with the pass through dompurify which is the initial sanitization step. refX, refY, markerWidth, markerHeight, markerUnits get stripped off due to the camel-casing. I'll get that fixed. In the meantime if you change to lowercase it should all work for you now. i.e. change to: refx, refy, markerwidth, markerheight

FYI, to get the svg post-panel changes you can press the SVG button in the panel options and then copy/paste it out of the console.

[bijwaard]

Thanks for the workaround! lowcase attributes work fine I also implemented autoscaling in steps of 500 inspired by your formula.

[andymchugh]

All the camelCase marker element attributes now work in 1.16.4, just published.