SVG模式中使用的圆线 [英] Round-cap lines used in a SVG pattern

问题描述

当前将SVG <pattern>元素与一堆<line>元素一起使用将使它具有某种渐缩边缘.我尝试了多种不同的CSS样式来解决此问题，但实际上没有任何效果.这是一个上面绣有针的圆圈的代码:

Currently using an SVG <pattern> element with a bunch of <line> elements will cause it to have a sort of tapered-off edge. I've tried a bunch of different CSS stylings to get around this, but nothing's really worked. Here's the code to a circle with a stitch masked on it:

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

And here's a fiddle of what this looks like. No combination of stoke-linecap and stroke-linejoin has worked for me. Do I instead need to draw a full <path> across the entire mask?

感谢您的帮助.

推荐答案

呜！太好了.

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

After seeing Duopixel's answer, I got started on a trail. I didn't know it was possible to achieve this effect until I understood the bounding box that applies to patterns.

Google搜索使我进入了此邮件列表答案，但没有直到最初的作者返回了见识(抱歉，链接太多)后，起初并没有多大意义.我回头看了一下答案，看到了解决这个问题的潜力.

Googling brought me to this mailing list answer which didn't make much sense at first until the original author returned with gained insight (sorry, too many links). I looked back at the answer and saw potential in solving this problem.

解决方案:
您必须在正确的坐标上在彼此的顶部覆盖两个图案！

Solution:
You have to overlay two patterns on-top of eachother in the right coordinates!

代码:(演示- 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>

=)

这篇关于SVG模式中使用的圆线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！