Блог

Главная - Вопросы по программированию - Как избавиться от этого ложного остатка формы круга/пути, отображаемого на веб-странице? (svg)

Как избавиться от этого ложного остатка формы круга/пути, отображаемого на веб-странице? (svg)

#javascript #html #svg

Вопрос:

У меня есть эти кнопки svg, которые я создал с помощью circle. Красный круг идеально перекрывается черным кругом в jsfiddle.

Вот прототип в JSFiddle

Это выглядит так

Прототип

Но когда я включаю его на свой сайт, он выглядит так

Результат веб-страницы

На нем показан тонкий красный контур круга, который не должен отображаться. Я почти уверен, что выбрал правильные размеры перекрывающейся черной фигуры и она не слишком мала.

Это какое-то сглаживание, происходящее на веб-странице? Как мне избавиться от этого?

Веб-сайт для просмотра-это фиктивный веб-сайт

Код такой:

  <svg viewBox="0 0 800 600" style="margin-top: -15px; margin-bottom: -15px;" height="100%" width="100%">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- 1 and 2 removed for clarity here, see full code in jsfiddle-->
  <!-- position at  60% height 20%  Y-->
 <rect x=10% y=68% width=79% height="28%" fill="url(#grad1)" />
  <svg x=-2% y=68% height="28%" width="12.5%">
 <circle cx="100%" cy="50%" r="83.5" fill="rgb(0,255,0)" />
 </svg>
 <svg x=88.9% y=68% height="28%" width="12.5%">
 <circle cx="0%" cy="50%" r="83.5" fill="rgb(255,0,0)" />
 </svg>
  <g stroke="none" fill="#16151a">
        <path d="
        M 711.2 408
        a 1 1 0 0 1 0 168
        l -250 0
        a 1 1 0 0 0 0 -168
        l 250 0
        Z
        "/>
</g> 
</svg>

Комментарии:

1. Распространенный артефакт сглаживания, когда фигуры накладываются друг на друга: graphicdesign.stackexchange.com/a/73731/60896

2. @Sphinxxx Большое спасибо. Я тоже как бы догадывался об этом. Таким образом, сгибание формы решает проблему. Я думаю, вам следует назвать это артефактом сглаживания, сглаживание-это процесс его удаления. en.wikipedia.org/wiki/Aliasing

3. Сглаживание-это процесс сглаживания того, что в противном случае выглядело бы как неровные края на экране, и именно это вызывает эту проблему: en.wikipedia.org/wiki/Spatial_anti-aliasing#Examples

Метки: ,