tcl svg 渐变转换不起作用 - 渐变默默被忽略

Question

我正在使用 tksvg 0.7.4 并注意到梯度变换不起作用。 尽管 tcl 尚不支持某些功能，但在 TIP 507 中明确提及支持此功能，并且据我所知，该软件包即将包含在 tk 8.7 中。

我使用以下数据：

<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>

并尝试将数据与正文中的以下行替换并将其包含在标题中，正如我在教程其他地方找到的那样，但没有成功。

<gradientTransform="rotate(90)" \>  

虽然提示标记为

done

，但我认为它应该已经可以工作了。顺便说一句，我正在使用 Windows 11。

---

更新：所有渐变属性都不起作用

Answer 1

正如我所评论的：使用

gradientTransform="rotate(90 0.5 0.5)"

，其中 0.5 0.5 标记中间的旋转中心

<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" gradientTransform="rotate(90 0.5 0.5)">
      <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>

Answer 2

这是故意的。使用库“svgnano”。光栅化器不支持渐变。

这是父项目：

https://github.com/memononen/nanosvg

您还可以查看 wiki 页面，其中包含一些提示：

https://wiki.tcl-lang.org/svg

Answer 3

感谢您的评论。是的，这是一团糟。自从 TkSVG 和 Tk 8.7+ 中的 SVG 源代码完全重新格式化后，我不清楚什么是其中的，什么不是。 我的回答“不支持渐变”是错误的。 在一定程度上支持渐变。 我将它们与 InkScape 一起使用，效果很好。 我可以确认 TkSVG 和 Tk 8.7 100% 兼容（相同来源）。

我在 Tk 9.0b2rc1 中尝试了你的示例

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

我得到你的结果了。

使用 InkScape 打开它会给出第二个框的旋转渐变。

在 Inkscape 中，我移动了渐变位置，然后将其放回去。 第二个梯度的定义变化如下：

<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>

两个梯度的结果符合预期。 显然，存在单位问题。 如果您愿意，可以在 svgnano 报告此问题。

谢谢你并保重， 哈拉尔