如何在保持抗锯齿的同时呈现清晰边缘的svg元素？ [英] How to render svg elements with crisp edges while still keeping anti-aliasing?

问题描述

我有创建一个浏览器的方法，基于网络的工具，可以在现代浏览器中使用。

玩弄形状渲染属性不会给我我要找的结果。

我希望我的元素具有很好的反锯齿功能，以便路径看起来很平滑，如下所示： shape-rendering：auto ：

但是我也希望不需要反锯齿的元素，如开始框看起来清晰明快，例如用形状呈现呈现时：crispEdges ：

这可能吗？我是否也想吃我的蛋糕并且也吃了它？ 可能你为根svg元素设置了形状渲染属性。

您应该为每个形状元素设置形状渲染属性，如下所示。

 <？xml version =1.0standalone =no？> 
< svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlink> 
< rect x =10y =10width =150height =20shape-rendering =crispEdges
 fill =nonestroke =black/> gt ; 
  stroke =blackstroke-width =5/> 
< / svg> 
  

Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?

I'm creating a browser-based tool that works in modern browsers.

Playing around with the shape-rendering attribute doesn't give me the results I'm looking for.

I want my elements to have nice anti-aliasing so that the paths look smooth like below with shape-rendering: auto:

But I also want elements that don't require anti-aliasing, like the start box to look sharp and crisp, such as when rendered with shape-rendering: crispEdges:

Is this possible? Am I looking to have my cake and eat it too?

解决方案

Perhaps you set shape-rendering property for root svg element.
You should set shape-rendering property for each shape elements, like this.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>

这篇关于如何在保持抗锯齿的同时呈现清晰边缘的svg元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！