2

<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>

这是一个看起来像什么的小提琴。没有任何组合stoke-linecap对stroke-linejoin我有用。我是否需要<path>在整个面具上画一个完整的？

谢谢你的帮助。

4

4 回答 4

8

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

Duopixel 强调了这里的问题：图案只是没有正确平铺。

您的解决方案肯定会通过覆盖两个非平铺图案来隐藏非平铺角来掩盖问题，但是如果您使图案更宽并添加彼此偏移的额外线条，并偏移以确保它们永远不会重叠tile 你可以创建一个有效的模式。您可以一直向上增加笔画宽度，而角落不会出现任何问题。

<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>

看到这个小提琴

不过，我实际上喜欢原始问题的模式！我可能不得不在某个地方找到它的用途:)

于 2014-03-14T10:01:32.350 回答
6

哇！什么骑。

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

谷歌搜索把我带到了这个邮件列表答案，起初没有多大意义，直到原作者返回并获得洞察力（对不起，链接太多）。我回顾了答案，看到了解决这个问题的潜力。

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

代码：（演示 - 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>

=)

于 2012-08-15T16:14:49.353 回答
3

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

在此处输入图像描述

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

于 2012-08-15T01:20:05.663 回答
0

该帖子很旧，但是当我寻找解决方案时，也许有人也需要像我这样的另一种解决方案。如上所述，对角线图案有问题，这就是为什么我创建了一个水平直线图案并用patternTransform="rotate(45)". 然后只<line />需要 1 个而不是 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>
于 2020-03-02T14:32:49.713 回答