Search code examples
imagesvgtcltk-toolkittksvg

tcl svg gradient transformation not working - gradient silently ignored

I'm using tksvg 0.7.4 and noticed that the gradient transformation isn't working. Despite some features are not supported (yet) by , this feature is explicitly mentioned as supported in TIP 507 and as far as I know this package is just about to be included in tk 8.7.

I use the following data:

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="black" stop-opacity="0" />
      <stop offset="95%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="black" stop-opacity="0" />
      <stop offset="95%" stop-color="blue" />
    </linearGradient>
  </defs>

  <rect id="rect1" x="10" y="10" rx="15" ry="15"
      width="100" height="100" fill="url(#Gradient1)"/>
  <rect
    x="10"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#Gradient2)" />
</svg>

and tried unsuccessfully to alternate the data with the following line in the body and included it in the header as I found elsewhere in a tutorial.

<gradientTransform="rotate(90)" \>

While the TIP is marked as done I think it should work already. I'm using Windows 11 by the way.

enter image description here

Update: All of the gradient attributes do not work

Solution

  • Thanks for the comment. Yes, it is a mess. And since the full reformatting of the SVG source code in TkSVG and Tk 8.7+, it is not clear to me, what is in and what is not. My answer "gradients are not supported" is wrong. Gradients are supported to a certain degree. I use them with InkScape and it works. I can confirm that TkSVG and Tk 8.7 are 100% compatible (same source).

    I tried your example in Tk 9.0b2rc1

    % image create photo -file c:/test/test.svg
image1
% pack [label .l -image image1]

    I get your result.

    Opening it with InkScape gives the rotated gradient for the 2nd box.

    In Inkscape, I moved the gradient position, and put it back. The definition of the 2nd gradient changed as follows:

    <linearGradient
   id="Gradient2"
   x1="10"
   x2="10"
   y1="120"
   y2="220"
   gradientUnits="userSpaceOnUse">
  <stop
     offset="0%"
     stop-color="red"
     id="stop4" />
  <stop
     offset="50%"
     stop-color="black"
     stop-opacity="0"
     id="stop5" />
  <stop
     offset="95%"
     stop-color="blue"
     id="stop6" />
</linearGradient>

    The result was as expected with two gradients. So apparently, there is a unit issue. You may report this at svgnano, if you like.

    Thank you and take care, Harald