使用旋转变换时的 SVG 间隙 [英] SVG gaps when using rotate transform
问题描述
我遇到了一个我无法解决的奇怪问题.我正在尝试编写一个矩形反应组件，其中可以选择 Box-Gradient.
I'm getting this weird problem which I haven't been able to solve. I'm trying to write a rectangle react component where a Box-Gradient is an option.
但是我的四个三角形之间有一个间隙，我尝试用它(包括使用高斯模糊)来缩小间隙，但我似乎无法在不导致角落混乱的情况下缩小间隙.
But my four triangles have a gap between them, I've tried hacking about with it (including using a gaussian blur) to close the gap but I can't seem to close the gap without causing the corners to mess up.
<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>
推荐答案
默认情况下，浏览器使用抗锯齿绘制 svg 形状/路径(即沿边缘部分覆盖的像素绘制为半透明像素).当两个形状/路径共享一个边缘时，沿着共享边缘的像素可以为两个形状/路径绘制成半透明，最终结果是一个半透明像素.这就是你所遇到的.当形状/路径与背景之间存在高对比度时(例如白色背景上的黑色形状/路径)，该问题最为明显.
By default, browsers draw svg shapes/paths using anti-aliasing (i.e. partially covered pixels along edge are drawn as semi-transparent pixels). When two shapes/paths share an edge, pixels along the shared edge could be painted semi-transparent for both shapes/paths with the end result be a semi-transparent pixel. This is what you are encountering. The issue is most noticable when there is high contrast between the shape/path and the background (e.g. black shape/path on white background).
您可以将 shape-rendering="crispEdges" 的属性或样式添加到 shape/path/svg 以指示浏览器应尝试强调干净边缘之间的对比度而不是渲染速度和几何精度.例如...
You can add an attribute or style of shape-rendering="crispEdges" to the shape/path/svg to indicate that the browser should attempt to emphasize contrast between clean edges over rendering speed and geometric precision. For example...
<polygon points="0,0 0,100 50,50" fill="url(#lickMy)" stroke-width:"0" shape-rendering="crispEdges"/>
请注意，这应该可以在某些浏览器(例如 Chrome、FireFox)但不是所有浏览器(例如 IE)中解决您的问题.当 shape-rendering="crispEdges" 时，一些浏览器关闭所有直线和曲线的抗锯齿，而其他浏览器仅关闭接近垂直或水平的直线的抗锯齿.
Note that this should solve your problem in some browswers (e.g. Chrome, FireFox) but not all browsers (e.g. IE). When shape-rendering="crispEdges", some browsers turn off anti-aliasing for all lines and curves while other browsers turn off anti-aliasing for just straight lines that are close to vertical or horizontal.
这篇关于使用旋转变换时的 SVG 间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
