Raphael JS 中的 Rect 在所有边上都没有相同的笔划宽度
Rect in Raphael JS doesn't have the same stroke width in all the sides
在这篇 jsFiddle 中,我有一篇带矩形的 Raphael JS 论文。如果放大,您会看到拉斐尔矩形的底部和右侧线条更宽:
如何让这个矩形的所有边都具有相同的宽度?我在 Chrome、IE 和 Firefox 中遇到这个问题。
var w = 500, h = 120;
var paper = Raphael("the_canvas", w, h);
paper.rect(0,0,90,20)
.attr({'stroke-dasharray': '-', 'stroke': '#303030', 'stroke-width': 1 });
它们看起来不同的原因实际上是由于默认 SVG css 属性 overflow
设置为 hidden
的方式。例如,如果您添加以下规则:
svg {
overflow: visible !important;
}
两个矩形看起来一样,但它们看起来像拉斐尔矩形的下半部分。
要在两个矩形的标准 SVG 节点上实现由 oveflow
属性 裁剪引起的清晰度,您可以使用以下 CSS 规则:
rect {
shape-rendering: crispEdges;
}
与第一条规则结合产生接近预期结果的结果。
这是你的 fiddle:
的叉子
和一个片段:
var w = 500, h = 120;
var paper = Raphael("the_canvas", w, h);
paper.rect(0,0,90,20)
.attr({'stroke-dasharray': '-', 'stroke': '#303030' });
#div1 {
margin: 20px;
}
svg {
overflow: visible !important;
}
rect {
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id="div1">
<svg width="90" height="20">
<rect width="90"
height="20"
style="fill:#ffffff;stroke-dasharray: 3,1;stroke-width:1; stroke: #303030" shape-rendering="crispEdges"/>
</svg>
<div id="the_canvas"></div>
</div>
在这篇 jsFiddle 中,我有一篇带矩形的 Raphael JS 论文。如果放大,您会看到拉斐尔矩形的底部和右侧线条更宽:
如何让这个矩形的所有边都具有相同的宽度?我在 Chrome、IE 和 Firefox 中遇到这个问题。
var w = 500, h = 120;
var paper = Raphael("the_canvas", w, h);
paper.rect(0,0,90,20)
.attr({'stroke-dasharray': '-', 'stroke': '#303030', 'stroke-width': 1 });
它们看起来不同的原因实际上是由于默认 SVG css 属性 overflow
设置为 hidden
的方式。例如,如果您添加以下规则:
svg {
overflow: visible !important;
}
两个矩形看起来一样,但它们看起来像拉斐尔矩形的下半部分。
要在两个矩形的标准 SVG 节点上实现由 oveflow
属性 裁剪引起的清晰度,您可以使用以下 CSS 规则:
rect {
shape-rendering: crispEdges;
}
与第一条规则结合产生接近预期结果的结果。
这是你的 fiddle:
的叉子和一个片段:
var w = 500, h = 120;
var paper = Raphael("the_canvas", w, h);
paper.rect(0,0,90,20)
.attr({'stroke-dasharray': '-', 'stroke': '#303030' });
#div1 {
margin: 20px;
}
svg {
overflow: visible !important;
}
rect {
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id="div1">
<svg width="90" height="20">
<rect width="90"
height="20"
style="fill:#ffffff;stroke-dasharray: 3,1;stroke-width:1; stroke: #303030" shape-rendering="crispEdges"/>
</svg>
<div id="the_canvas"></div>
</div>