HTML 边框插值

Question

Google Chrome 给出以下 HTML 时绘制红色圆圈。我最初以为这是 Chrome 中的错误，但是 Safari 也绘制了一个红色圆圈。在 Firefox 中，页面显示为白色。边框插值浏览器是特定的还是红色圆圈只是因为渲染错误才出现？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SVG Overflow Experiment</title>
  </head>
  <body>
   <div
      style="
        border-color: white;
        border-radius: 50%;
        width: 200px;
        height: 200px;
        overflow: hidden;
      "
    >
      <svg width="200" height="200">
        <rect width="300" height="300" fill="red" />
        <rect width="400" height="400" fill="white" />
      </svg>
    </div>
  </body>
</html>

Answer 1

看起来颜色在圆边上混合了。可能是抗锯齿问题。

我又添加了一个矩形并更改了颜色以证明这一点。在下面的代码中，删除黄色或蓝色矩形，您会注意到它们在同时存在时正在混合。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SVG Overflow Experiment</title>
  </head>
  <body>
   <div
      style="
        border-color: white;
        border-radius: 30%;
        width: 200px;
        height: 200px;
        overflow: hidden;
        
      "
    >
      <svg width="200" height="200">
        <rect width="400" height="400" fill="rgba(0,0,255,0.4)" />
        <rect width="300" height="300" fill="yellow"/>
         <rect width="400" height="400" fill="white" />
      </svg>
    </div>
    Testing
  </body>
</html>

如果您在 svg 上设置 mix-blend-mode: hard-light;，它会删除混合。您可以根据需要选择其他混合方式。
或者简单地添加属性 filter:brigtness(1) 似乎可以解决 chrome 中的问题。我不知道为什么会这样。将亮度设置为 1 比设置混合波特无害。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>SVG Overflow Experiment</title>
</head>
<style>
  div {
    border-color: white;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  
  svg {
    filter: brightness(1);
    /* or use below */
    /* mix-blend-mode: hard-light; /* choose blending as per your requirement */
  }
</style>

<body>
  <div>
    <svg width="100%" height="100%">
        <rect width="400" height="400" fill="rgba(0,0,255,0.4)" />
        <rect width="300" height="300" fill="yellow" />
        <rect width="400" height="400" fill="white" />
      </svg>
  </div>
  Testing
</body>

</html>

HTML 边框插值

HTML Border Interpolation

html

css

svg