是否可以在某个绝对位置开始/停止SVG渐变？
是否可以在某个绝对位置开始/停止SVG渐变？
提问于 2019-03-13 06:26:06
我在Javascript中创建了不同的L型路径。它们在长度和位置上有所不同。我希望有一个linearGradient作为它们的笔划，其中第一个停止偏移量是在x=10像素的位置，即颜色的变化总是在x像素之后开始。
使用渐变，标准方法只提供相对定位(例如，wrt，对象边界框)。由于对象边界框的不同，这会导致不同的停止偏移。
下面是一个示例：
path.p1 {
fill: none;
stroke-width: 20px;
}<svg height="600" width="1000">
<path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
<path class="p1" d="M150 10 V 100 H 200 " stroke="url(#cl1)"/>
<path class="p1" d="M250 10 V 100 H 400 " stroke="url(#cl1)"/>
<defs>
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" style="stop-color:grey;stop-opacity:1" />
<stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
<stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
<stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
有没有一种方法可以使用一个渐变，但是有一种聪明的方法可以通过SVG嵌套或javascript引用它？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-13 07:02:35
使用gradientUnits="userSpaceOnUse"。这样，渐变以绝对单位定位，但始终位于定义它的元素的局部坐标系中。
在您的示例中，将所有路径放在同一坐标系中将意味着您定义了跨越所有路径的总体渐变。为了避免这种情况，您必须对其进行更改，例如，通过定义transform属性。每条连续的路径都会向右移动更多位置，而其起点(在局部坐标系中测量)将保持不变。
path.p1 {
fill: none;
stroke-width: 20px;
}<svg height="600" width="1000">
<path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
<path class="p1" d="M10 10 V 100 H 60 " stroke="url(#cl1)" transform="translate(140)"/>
<path class="p1" d="M10 10 V 100 H 160 " stroke="url(#cl1)" transform="translate(240)"/>
<defs>
<linearGradient id="cl1" gradientUnits="userSpaceOnUse" x1="10" y1="0" x2="110" y2="0">
<stop offset="0" style="stop-color:grey;stop-opacity:1" />
<stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
<stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
<stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55131536
复制相关文章
相似问题
腾讯云开发者
