2

我们希望使用线性插值（例如 OpenGL）在 pdf 等矢量图形文件中混合在三角形顶点指定的颜色。

这个例子混合了红色、蓝色和绿色：

三角形内颜色的线性插值

这在PDF中可能吗？如果不是，那么 SVG 或其他一些支持良好的矢量图形文件格式？

似乎梯度网格很强大，但它们可以退化以精确再现线性插值吗？

4

1 回答 1

1

你的问题的纯粹答案是“不”。您不能在 SVG 或 PDF 中进行三点渐变。

但是，您可以使用几个渐变和蒙版轻松再现该图像。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 86.6">
  <defs>
    <linearGradient id="bluegreen" gradientUnits="objectBoundingBox" x1="0.5" x2="1" y2="1">
        <stop offset="0%" stop-color="#0000ff"/>   
        <stop offset="100%" stop-color="#00ff00"/>   
    </linearGradient>
    <linearGradient id="fader" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </linearGradient>
    <mask id="redmask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <path d="M 0.5,0 L 1,1 0,1 Z" fill="url(#fader)" />
    </mask>
  </defs>

  <g>
    <path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#bluegreen)"/>
    <path d="M 50,0 L 100,86.6 0,86.6 Z" fill="#ff0000" mask="url(#redmask)"/>
  </g>
</svg>

http://jsfiddle.net/P48FD/

更新：实际上，我在想什么？：/你不需要面具。你可以用两个线性渐变来做到这一点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 86.6">
  <defs>
    <linearGradient id="bluegreen" gradientUnits="objectBoundingBox" x1="0.5" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#0000ff"/>   
        <stop offset="100%" stop-color="#00ff00"/>   
    </linearGradient>
    <linearGradient id="redfade" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#ff0000" stop-opacity="0" />
    </linearGradient>
  </defs>

  <g>
    <path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#bluegreen)"/>
    <path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#redfade)"/>
  </g>
</svg>

http://jsfiddle.net/Q3qjB/

于 2013-08-10T12:05:20.093 回答