Question

目前我在html 5项目中使用线性渐变填充矩形，像这样的svg代码：

 <svg xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1352" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:-0.4000244140625px;top:-0.399993896484375px;">
  <rect id="SvgjsRect6626" width="34" height="172" x="0.5" y="0.5" stroke="#000000" stroke-width="1" fill="url(#SvgjsLinearGradient6627)"/>
  <defs id="SvgjsDefs1353">
    <linearGradient id="SvgjsLinearGradient6627" x1="0" y1="1" x2="0" y2="0">
      <stop id="SvgjsStop6628" stop-opacity="1" stop-color="blue" offset="0.17221135029354206"/>
      <stop id="SvgjsStop6629" stop-opacity="1" stop-color="#cccccc" offset="0.17221135029354206"/>
      <stop id="SvgjsStop6630" stop-opacity="1" stop-color="#cccccc" offset="1"/>
    </linearGradient>
  </defs>
</svg>

如您所见，线性渐变从下到上填充矩形带有起点（0,1）和终点（0,0）。问题是，有时svg本身是旋转的，我仍然想要从下到上填充矩形，并保持顶部在同一水平线。

以下是我现有的内容：

http://i.stack.imgur.com/8Jo9C.png

正如您在左侧看到的那样，矩形旋转，填充矩形的线性渐变也与矩形一起旋转，但我所期望的是下面的内容：

i.stack.imgur.com/CqHgu.png

那么，如果旋转svg，如何获得正确的填充起点和终点？

实际上，我之前尝试过渐变变换，但它不能像我预期的那样工作，例如，如果rect旋转角度是30，那么线性渐变旋转角度应该类似于-10，请检查下面的svg代码：< / p>

<svg width="35" height="173" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
      <defs>
           <linearGradient gradientTransform="rotate(-10)" y2="0" x2="0" y1="1" x1="0" id="SvgjsLinearGradient6627">
                <stop offset="0.17221" stop-color="blue" id="SvgjsStop6628"/>
                <stop offset="0.17221" stop-color="#cccccc" id="SvgjsStop6629"/>
                <stop offset="1" stop-color="#cccccc" id="SvgjsStop6630"/>
           </linearGradient>
      </defs>
      <g>
          <title>Layer 1</title>
          <rect transform="rotate(30)" fill="url(#SvgjsLinearGradient6627)" stroke="#000000" y="0.5" x="0.5" height="172" width="34" id="SvgjsRect6626"/>
      </g>
 </svg>

为什么会这样？或者如果我想使用渐变变换来解决这个问题，怎么能得到线性渐变的正确角度？

我还尝试计算下面填充向量的正确起点和终点：

        var a1 = Vector.create([0, 1]);
        var a2 = Vector.create([0, 0]);
        var b = Vector.create([0, 0.5]);
        var c1 = a1.rotate(-this.getRotation() * Math.PI / 180, b);
        var c2 = a2.rotate(-this.getRotation() * Math.PI / 180, b);
        this.__levelGradient.from(c1.elements[0], c2.elements[0]).to(c1.elements[1], c2.elements[1]);
        this._element.fill(this.__levelGradient);

'Vector'来自库Sylvester（sylvester.jcoglan.com/api/vector.html），库svg.js（www.svgjs.com/）也在这里使用。我希望有人可以在我的实现中找出问题，或者如果你有任何其他想法来实现它，请告诉我代码如何计算它。

@Michael Mullany，谢谢你的帮助！由于声誉较低，我无法发布图片，这真的很糟糕，否则我可以给你看一些图片。

Answer 1

您可以在渐变上使用gradientTransform属性来撤消变换对对象的影响。它不是特别优雅，但它会起作用。

如何在旋转的svg矩形中从下到上填充？

1 个答案: