时间戳

首页 > 解决方案 > 在线性渐变 X/Y 中包含笔画宽度

svg - 在线性渐变 X/Y 中包含笔画宽度

问题描述

我遇到了线性渐变的问题，当我将它添加到笔画时，它不会像作为填充应用时那样显示。我认为这是问题所在：objectBoundingBox，在本节的底部，它说：

当适用元素的几何形状没有宽度或没有高度时（例如水平或垂直线的情况），即使当由于具有非零笔划宽度而查看时线条具有实际厚度时，也不应使用关键字 objectBoundingBox边界框计算忽略笔画宽度。当适用元素的几何形状没有宽度或高度并且指定了 objectBoundingBox 时，将忽略给定的效果（例如，渐变或过滤器）。

我来给你展示：

这是带有填充的矩形的样子：

<svg name="scaled1box" overflow="visible" x="12.35" y="12.35" fill="url(#fillLinGrads0sp5)">
        <defs>
          <linearGradient id="fillLinGrads0sp5" x1="0" y1="0" x2="1" y2="1" >
            <stop offset="0" stop-color="#7030A0" />
            <stop offset="0.49" stop-color="#7030A0" />
            <stop offset="0.5" stop-color="#FFFFFF" />
            <stop offset="0.51" stop-color="#0070C0" />
            <stop offset="1" stop-color="#0070C0" />
          </linearGradient>
        </defs>
        <path d="M0,0L72,0L72,144L0,144Z" />
      </svg>

但是用中风代替：

<svg name="scaled1box" overflow="visible" x="12.375" y="12.375"  fill="none" stroke="url(#strokeLinGrads0sp5)" stroke-width="25" stroke-miterlimit="8">
        <defs>
          <linearGradient id="strokeLinGrads0sp5" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#7030A0" />
            <stop offset="0.49" stop-color="#7030A0" />
            <stop offset="0.5" stop-color="#FFFFFF" />
            <stop offset="0.51" stop-color="#0070C0" />
            <stop offset="1" stop-color="#0070C0" />
          </linearGradient>
        </defs>
        <path d="M0,0L72,0L72,144L0,144Z" />
      </svg>

请注意，在带有笔划的那个中，“45 度”角略微偏离。我相信这与边界框仅用于路径而不是路径+笔画宽度这一事实有关。

好的。怎么办？我仍然需要它用于路径+描边+宽度。

所以我尝试设置相对坐标，但无法弄清楚这是如何工作的。x2="1"意思是我将 w=72,h=144 的矩形增加到 w=144,h=144 的正方形，并将“和”的端点设置为y2="1它们相对于原始边界框的位置 - 所以x2="1.1736"和y2="1.1736“（1.1736 = 新的 w/h 为 169（笔划宽度为 144+25）除以旧的 w/h 为 144。）。没有骰子。然后我尝试偏移起点和终点以首先考虑转换，然后是比例。再次，没有骰子。

于是我就去找了。这看起来很有希望，直到我无法真正弄清楚他的变量，比如 eps 等。

所以，当所有其他方法都失败时，我只是试着摆弄数字。这似乎很接近。

<svg name="scaled1box" overflow="visible" x="12.375" y="12.375" fill="none" stroke="url(#strokeLinGrads0sp5)" stroke-width="25" stroke-miterlimit="8">
        <defs>
          <linearGradient id="strokeLinGrads0sp5" x1="-0.087" y1="-0.24" x2="1.17" y2="1.17">
            <stop offset="0" stop-color="#7030A0" />
            <stop offset="0.49" stop-color="#7030A0" />
            <stop offset="0.5" stop-color="#FFFFFF" />
            <stop offset="0.51" stop-color="#0070C0" />
            <stop offset="1" stop-color="#0070C0" />
          </linearGradient>
        </defs>
        <path d="M0,0L72,0L72,144L0,144Z" />
      </svg>

但我不确定如何计算所有起点/终点。它真的只是在胡闹。

选项：

  1. 放弃并将笔画转换为路径。
  2. 从您那里获得一些帮助，以了解如何使用初始值转换相对或绝对点值以适应 BB + 笔划宽度。

标签： svglinear-gradients

解决方案

我在这里找到了一段很好的代码，可以帮助压缩像魅力一样的原始角度。

推荐阅读