如何在保持抗锯齿的同时呈现边缘清晰的 svg 元素?

问题描述

有没有办法在保持抗锯齿的同时渲染具有清晰边缘的 svg 元素?

我正在创建一个可在现代浏览器中使用的基于浏览器的工具.

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.

我希望我的元素具有良好的抗锯齿效果，以便路径看起来平滑，如下所示，shape-rendering: auto:

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

但我也希望不需要抗锯齿的元素，例如 开始框看起来清晰明快，例如使用 shape-rendering:crispEdges:

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?

推荐答案

也许你为根 svg 元素设置了形状渲染属性.
您应该为每个形状元素设置形状渲染属性，如下所示.

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 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！