Пробелы SVG при использовании преобразования поворота

Я получаю эту странную проблему, которую я не смог решить. Я пытаюсь написать компонент реакции прямоугольника, где опция Box-Gradient является опцией.Пробелы SVG при использовании преобразования поворота

Но у меня есть четыре треугольника между ними, я пытался взломать его (включая использование гауссово размытия), чтобы закрыть промежуток, но я не могу закрыть зазор, не заставляя углы испортить ,

<html style="margin:0;padding:0;height:100%;width:100%;"> 
    <head> 
    </head> 
    <body style="margin:0;padding:0;height:100%;width:100%;"> 
     <svg height=0 width=0> 
      <defs> 
       <linearGradient id="lickMy" x1="0%" y1="0%" x2="100%" y2="0%"> 
        <stop offset="0%" style="stop-color:rgb(125,125,125);stop-opacity:1" /> 
        <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> 
        <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> 
       </linearGradient> 
       <filter id="balls"> 
        <feGaussianBlur stdDeviation="1" /> 
       </filter> 
      </defs> 
     </svg> 

     <svg height=100% width=100% > 
      <rect width="100%" height="100%" fill="rgb(125,125,125)"></rect> 
      <circle cx="100" cy="100" r="40" fill="white" /> 
      <g transform="translate(50,50)" > 
       <g> 
        <polygon points="0,0 0,100 50,50" fill="url(#lickMy)" stroke-width:"0" /> 
       </g> 
       <g transform="rotate(90,50,50)"> 
        <polygon points="0,0 0,100 50,50" fill="url(#lickMy)" stroke-width:"0" /> 
       </g> 
       <g transform="rotate(180,50,50)"> 
        <polygon points="0,0 0,100 50,50" fill="url(#lickMy)" stroke-width:"0" /> 
       </g> 
       <g transform="rotate(-90,50,50)"> 
        <polygon points="0,0 0,100 50,50" fill="url(#lickMy)" stroke-width:"0" /> 
       </g> 
      </g> 
     </svg> 
    </body> 
</html>

источник

2016-02-03 Brad

По умолчанию, браузеры нарисовать SVG формы/пути, используя сглаживание (то есть частично покрыты пикселей вдоль кромки изображены в виде полупрозрачных пикселей). Когда две формы/пути разделяют край, пиксели вдоль общего края могут быть окрашены полупрозрачными для обеих фигур/путей, а конечным результатом будет полупрозрачный пиксель. Это то, с чем вы сталкиваетесь. Проблема наиболее примечательна, когда существует высокая контрастность между формой/дорожкой и фоном (например, черная фигура/путь на белом фоне).

Вы можете добавить атрибут или стиль формы-рендеринга = "crispEdges" в форму/путь/svg, чтобы указать, что браузер должен попытаться подчеркнуть контраст между чистыми краями по скорости рендеринга и геометрической точностью. Например ...

<polygon points="0,0 0,100 50,50" fill="url(#lickMy)" stroke-width:"0" shape-rendering="crispEdges"/>

Обратите внимание, что это должно решить вашу проблему в некоторых browswers (например, Chrome, FireFox), но не все браузеры (например, IE). Когда shape-rendering = "crispEdges", некоторые браузеры отключают сглаживание для всех строк и кривых, в то время как другие браузеры отключают сглаживание только для прямых линий, которые близки к вертикали или горизонтали.

источник

2016-02-03 18:26:22

Спасибо! это помогло, но я все еще получаю вид X через квадрат, когда я возвращаю градиент, это оптическая иллюзия? – Brad

Вот скриншот до и после: http://postimg.org/image/qbo7ofoa5/ Еще раз спасибо! – Brad

Пробелы SVG при использовании преобразования поворота

ответ

Смежные вопросы