Question: Centering text

[scottctr]

I'm using the following style to center some SVG text (in conjunction with moving the x attribute), but this isn't reflected in my PDF. It's just starting the text at the x offset. Is there a better way?

  svg text tspan {
    text-anchor: middle;
  }

[HackbrettXXX]

And there you found another bug ;) Thanks for the report. I'm quickly fixing it...

[yGuy]

@HackbrettXXX - don't you think that with SVG 2.0 we should do a lot more replacements like this one?

After reading the spec I believe, we need to replace almost all element.getAttribute() calls with the getAttribute(element, ...) helper method call. What do you think?

[scottctr]

@HackbrettXXX Thanks, but I'm still seeing the issue with the updated dist files.

<text transform="translate(0 3)" fill="#333333" font-family="Arial" font-size="10px" font-style="normal" font-weight="bold">
    <tspan dy="1.1em" x="75">Entity Name 1</tspan>
</text>

[scottctr]

@yGuy See the black dot below the rectangle in my image above? Here's the SVG for that:

<g transform="translate(142.78 72)">
          <g class="port">
            <ellipse rx="8" ry="8"></ellipse>
            <line x1="-6" y1="0" x2="6" y2="0" class="port-icon"></line>
            <line x1="0" y1="-1" x2="0" y2="1" class="port-icon port-icon-collapse"></line>
          </g>
        </g>

Is this a symptom of the element.getAttribute() vs getAttribute(element, ...) you mention above?

Here's the styles, if it helps:

      .port {
        transform: scale(1); 
        transition: 0.2s ease-in-out;
        fill: $light-gray-alt-4;
      }

      .port-icon {
        stroke: white;
        stroke-width: 2px;
        transition: 1s ease-in-out;
      }

      .port-icon-expand {
        transform: scaleY(6);
      }

      .port-icon-collapse {
        transform: scaleY(0);
      }

[HackbrettXXX]

The reason your CSS properties have no effect, it that we make a defensive copy of the SVG element that is not attached to the DOM. As a workaround you can define your style properties inline.

A quick look over the sources tells me that we do not really need to make the defensive copy of the SVG element. However, external modification of the SVG might break svg2pdf while it is running. We could leave the cloning to the user, although this would slightly modify our API.

I'm currently working on supporting all SVG 2.0 presentation attributes...

[scottctr]

Thanks for letting me know. I'll give inlining the styles a try.

[HackbrettXXX]

81

[scottctr]

Should both of the issues above be fixed with the latest release? I'm still seeing both. I have a workaround for centering the text, but not for drawing the port icon.

PDF

Graph

[HackbrettXXX]

The issues are not fixed by the latest release for reasons I mentioned earlier. What we might do is to add an option like dontClone you could set to true, where we would not clone the svg and thus styling through style tags would work.

[HackbrettXXX]

Closing this again... (see #81)