[svg] href creates rect in bad position

[pkra]

Example input: $$\text{A display equation with a link inside } \href{#myid}{17}$$

The rect with data-hitbox=true ends up in the wrong position.

From

https://github.com/mathjax/MathJax-src/blob/32213009962a887e262d9930adcfb468da4967ce/ts/output/svg/Wrapper.ts#L146-L151

I'm guessing it should be in the g (or get an appropriate x attribute to match the translation of the g).

[pkra]

The following seems to fix it -- happy to make a PR.

  protected createSVGnode(parent: N): N {
    const href = this.node.attributes.get('href');
    if (href) {
      parent = this.adaptor.append(parent, this.svg('a', {href: href})) as N;
    }
    this.element = this.adaptor.append(parent, this.svg('g', {'data-mml-node': this.node.kind})) as N;
    if (href) {
      const {h, d, w} = this.getBBox();
      this.adaptor.append(this.element, this.svg('rect', {
      'data-hitbox': true, fill: 'none', stroke: 'none', 'pointer-events': 'all',
      width: this.fixed(w), height: this.fixed(h + d), y: this.fixed(-d)
    }));
    }
    return this.element;
  }

[dpvc]

Thanks for spotting this issue.

There are a couple of places where the the first child of this.element is assumed to be the actual content of the element, so while moving the rect into the main g element works most of the time, it will cause problems in a few cases. That is why the rect was outside the main g element.

I think the correct fix is actually in the SVGWrapper's place() method, since that is where the element gets its x and y coordinates.

https://github.com/mathjax/MathJax-src/blob/32213009962a887e262d9930adcfb468da4967ce/ts/output/svg/Wrapper.ts#L244-L252

I think that moving the hitbox along with the group should do the trick.

  public place(x: number, y: number, element: N = null) {
    if (!(x || y)) return;
    const adaptor = this.adaptor;
    const translate = 'translate(' + this.fixed(x) + ', ' + this.fixed(y) + ')';
    if (!element) {
      element = this.element;
      if (this.node.attributes.get('href')) {
        const rect = adaptor.previous(element);
        if (rect && adaptor.kind(rect) === 'rect' && adaptor.getAttribute(rect, 'data-hitbox')) {
          adaptor.setAttribute(rect, 'transform', translate);
        }
      }
    }
    let transform = adaptor.getAttribute(element, 'transform') || '';
    adaptor.setAttribute(element, 'transform', translate + (transform ? ' ' + transform : ''));
  }

[pkra]

Thanks, Davide!