Question

目前，使用带有一堆<pattern>元素的SVG <line>元素会使其具有一种逐渐变细的边缘。我已经尝试了一些不同的CSS样式来解决这个问题，但没有什么是真正有效的。这是一个圆圈的代码，上面刻有一个针脚：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="500" width="500">
  <defs>
    <pattern id="stripe" patternUnits="userSpaceOnUse" width="20" height="20">
      <line x1="0" y1="0" x2="20" y2="20" />
    </pattern>
    <mask id="mask">
      <rect height="500" width="500" style="fill: url(#stripe)" />
    </mask>
    <style>
      #stripe line {
        fill: white;
        stroke: white;
        stroke-linecap: square;
        stroke-linejoin: miter;
        stroke-width: 10px;
      }
      g {
        mask: url(#mask);
        stroke-linecap: square;
        stroke-linejoin: miter;
      }
      circle {
        fill: green;
      }
    </style>
  </defs>
  <g>
    <circle cx="250" cy="250" r="200" style="fill: rgba(0, 255, 0, 0.2);" />
  </g>
</svg>

这是a fiddle的看法。 stoke-linecap和stroke-linejoin的任何组合都不适用于我。我是否需要在整个面具上绘制一个完整的<path>？

感谢您的帮助。

Answer 1

嗯，我知道这个答案已经迟了2年了，但我在研究另一个问题时偶然发现了这个问题，并且认为我会为可能碰到它的人投入2美分。

这里的问题正如Duopixel所强调的那样：图案不是正确的。

你的解决方案肯定通过覆盖两个非平铺图案来隐藏非平铺角来掩盖问题，但如果你使图案更宽并添加彼此偏移的额外线，并偏移以确保它们永远不会重叠瓷砖的一角你可以创建一个功能模式。你可以一直向上提高行程宽度，而不会出现角落问题。

<pattern id="stripe" patternUnits="userSpaceOnUse" width="40" height="20">
  <line x1="-10" y1="0" x2="10" y2="20" />
  <line x1="10" y1="0" x2="30" y2="20" />
  <line x1="30" y1="0" x2="50" y2="20" />
</pattern>

请参阅this fiddle

我实际上喜欢原始问题所做的模式！我可能必须在某处找到它的用途：）

Answer 2

呜！真是个好车。

在看到Duopixel的回答之后，我开始走上了一条路。在我理解适用于模式的边界框之前，我不知道有可能实现这种效果。

谷歌搜索带我到this mailing list answer，一开始没有多大意义，直到最初的作者带着深刻的洞察力回来（抱歉，链接太多）。我回头看了答案，看到了解决这个问题的潜力。

<强>解决方案：
你必须在正确的坐标中叠加两个图案！

代码：（演示 - http://jsfiddle.net/66UDU/）

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="500" width="500">
  <defs>
    <pattern id="stripe1" class="stripe" patternUnits="userSpaceOnUse" width="20" height="20">
      <line x1="0" y1="0" x2="20" y2="20" />
    </pattern>
    <pattern id="stripe2" class="stripe" patternUnits="userSpaceOnUse" x="6" y="6" width="20" height="20">
      <line x1="0" y1="0" x2="20" y2="20" />
    </pattern>
    <mask id="mask">
      <rect height="500" width="500" style="fill: url(#stripe1)" />
      <rect height="500" width="500" style="fill: url(#stripe2)" />
    </mask>
    <style>
      .stripe line {
        fill: white;
        stroke: white;
        stroke-width: 4px;
      }
      g {
        mask: url(#mask);
      }
      circle {
        fill: rgba(0, 255, 0, 0.25);
      }
    </style>
  </defs>
  <g>
    <circle cx="250" cy="250" r="200" />
  </g>
</svg>

=）

Answer 3

这是一个有趣的问题。它看起来像是一个线帽问题，但实际问题是图案的线角位于坐标之外。这是一个了解正在发生的事情的图表：

enter image description here

您可以使用<pattern id="stripe" patternUnits="userSpaceOnUse" width="30" height="30">使图案变大或移动线条的坐标。在粗略搜索中，我无法找到任何允许您的模式重叠或显示溢出的指令，但其他人可能知道解决方法。

Answer 4

该帖子很旧，但是当我寻找解决方案时，也许有人也需要像我这样的另一种解决方案。如上所述，对角线图案存在问题，这就是为什么我创建了一条水平直线图案并用patternTransform="rotate(45)"对其进行了转换的原因。那么只需要1个<line />，而不是2个重叠的

。

示例：

<pattern id="stripe45" className="stripe-pattern" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" width=".2" height=".2">
      <line x1="0" y1=".1" x2=".2" y2=".1" />
    </pattern>

SVG模式中使用的圆帽线

4 个答案: