Обратите внимание, что «255» в вашей цветовой матрице не делает ничего, кроме «1» - столбец с фиксированным смещением унифицирован, поэтому 0 -> 1 эквивалентно нормальному rgb 0-> 255.
аюсь применить<filter>
на<path>
но у меня проблемы с обрезкой, не только размытия, но и части исходного изображения, а именно маркеров.
Поэтому я попытался увеличить высоту фильтра по умолчанию (который120%
) но, похоже, это не помогло.
<svg style="height:400px;width:100%;background-color:LightCyan">
<defs>
<filter id="colorFilter" height="999%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
<feMerge>
<feMergeNode in="lightenedBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<g transform="scale(2)">
<g transform="translate(-500,-230)">
<path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
</g>
<g transform="translate(-500,-200)" filter="url(#colorFilter)">
<path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
</g>
<g transform="translate(-500,-120)" filter="url(#colorFilter)">
<path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
</g>
</g>
</svg>
Теперь<g>
охватывает столько, сколько необходимо, чтобы окружить все его дочерние элементы, что означает, что для верхней стрелки высота не слишком велика, поэтому я попытался использовать абсолютные вместо относительных значений дляheight
но это тоже не помогает
<svg style="height:300px;width:100%;background-color:LightCyan">
<defs>
<filter id="colorFilter" height="1234">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
<feMerge>
<feMergeNode in="lightenedBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<g transform="scale(2)">
<g transform="translate(-500,-230)" filter="url(#colorFilter)">
<path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
</g>
<g transform="translate(-500,-150)" filter="url(#colorFilter)">
<path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
</g>
</g>
</svg>
Любая идея, что может вызвать это отсечение и что с этим можно сделать? Почемуheight
Значения атрибута выше определенной точки здесь не влияют?
(Воспроизведено в Chrome, Firefox и Edge - не похоже на ошибку браузера.)