SVG蒙版渲染错误 [英] SVG mask rendering incorrectly

问题描述

这是一个简单的SVG蒙版(

在我看来，这是错误地呈现的:红线丢失了.红线应显示在绿线的左侧，但根据遮罩的形状应除去中心部分.但是，根本没有画红线.

我花了很多时间研究SVG蒙版的文档，但是在这里看不到问题.如果有人看到错了，我将不胜感激.问题不在于遮罩的坐标系(通常是令人困惑的区域)，因为遮罩的蓝色矩形已正确呈现.

解决方案

掩码的默认值是使用objectBoundingBox单位，在这种情况下，您必须是fiddle):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -400 600 600">

  <!-- Here I define the mask, a white rectangle with a strip removed -->
  <defs>
    <mask id="mymask">
      <rect x="100" y="-200" width="200" height="100" fill="white"/>
      <path d="M 250 -150  L 150 -150" stroke="black" fill="none" stroke-opacity="1" fill-opacity="1" stroke-width="25"/>
    </mask>
  </defs>

  <!-- This masked blue rectangle is displayed correctly, and lets us see where the mask is -->
  <rect x="-100" y="-300" width="500" height="500" fill="blue" fill-opacity="0.2" mask="url(#mymask)"/>

  <!-- This green vertical line is not masked, and is drawn on top of the blue rectangle -->
  <path d="M 220 -110 L 220 -190" stroke="green" stroke-opacity="0.5" stroke-width="10" fill="none"/>

  <!-- INCORRECT - This masked red line should be drawn to the left of the green line, but it does not appear -->
  <path d="M 180 -110 L 180 -190" stroke="red" stroke-width="10" mask="url(#mymask)"/>

</svg>

This produces the following output:

It seems to me that this is being rendered incorrectly: the red line is missing. The red line should appear to the left of the green line, but with the central part removed, according to the mask shape. However, the red line is not being drawn at all.

I have spent a lot of time studying the documentation for SVG masks but I cannot see the issue here. If anybody can see what is wrong I would very much appreciate the insight. The issue cannot be with the coordinate system for the mask (often a confusing area) because the masked blue rectangle is being rendered correctly.

解决方案

The default for masks is to use objectBoundingBox units, in which case you have to be careful of this

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

The shapes that are missing have no height or width as they are only visible by dint of stroking.

这篇关于SVG蒙版渲染错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！