如何调整SVG填充图案的箭头方向使其沿多边形斜边倾斜

你只需要调整<pattern>标签的patternTransform属性的旋转参数，让整个图案的旋转角度和多边形斜边的倾斜角度匹配即可，具体修改说明和代码如下：

核心修改逻辑 #

• 先计算你当前多边形斜边的倾斜角度：你给出的多边形斜边两个端点为(50,28)和(190,48)，水平差140px，垂直差20px，对应倾斜角度约为8.13度
• 修改patternTransform的旋转值，在原有旋转基础上叠加斜边的倾斜角度即可让箭头沿斜边方向排列

完整可运行代码 #

<svg id='patternId' width='100%' height='300' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <!-- 调整patternTransform的rotate值，叠加斜边倾斜角度，这里以8度为例 -->
    <pattern id="pattern_2" patternUnits="userSpaceOnUse" width="8" height="48" patternTransform="rotate(188) scale(4,4)">
      <rect x="0" y="0" width="100%" height="100%" fill="#68E9E5" fill-opacity="0.2"></rect>
      <line x1="1" y1="0" x2="1" y2="48" stroke="#68E9E5" stroke-width="0.2"></line>
      <polygon points="0,5 1,0 2,5" fill="#68E9E5" stroke="#68E9E5" stroke-width="0.1"></polygon>
    </pattern>
  </defs>
  <!-- 修正了你原多边形重复的坐标点，调整为完整梯形，你可以根据需求替换为自己的多边形参数 -->
  <polygon points="50,28 190,48 190,100 50,80" fill="url(#pattern_2)" stroke="#39748E" stroke-width="0.2" fill-opacity="0.5"></polygon>
</svg>

微调说明 #

如果箭头和斜边没有完全对齐，你可以直接修改rotate里的角度值，每次±1度测试即可，不需要调整图案内部的元素坐标。如果出现图案偏移的情况，还可以在patternTransform属性中追加translate(x偏移量, y偏移量)来调整图案的起始位置。

内容的提问来源于stack exchange，提问作者ste4lth