html - 如何在保持抗锯齿的同时渲染边缘清晰的 svg 元素?

标签 html svg

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

我正在创建一个可在现代浏览器中运行的基于浏览器的工具。

玩转 shape-rendering属性没有给我正在寻找的结果。

我希望我的元素有很好的抗锯齿,这样路径看起来很平滑,如下图shape-rendering: auto:

enter image description here

但我也想要不需要抗锯齿的元素,比如开始框看起来清晰锐利,比如用shape-rendering: crispEdges渲染时>:

enter image description here

这可能吗?我是不是也想吃我的蛋糕?

最佳答案

也许您为根 svg 元素设置了形状渲染属性。
您应该像这样为每个形状元素设置形状渲染属性。

<?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>

关于html - 如何在保持抗锯齿的同时渲染边缘清晰的 svg 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22161624/

相关文章:

html - 如何在CSS中的元素上做透明度渐变?

javascript - 将文本即时转换为超链接或将它们存储在数据库中?

Python,尝试解析html以获取电子邮件地址

SVG Sprite : how to handle sizes?

javascript - 当页面中有多个 SVG 时,如何将 SVG 转换为 canvas 到 PNG

javascript - 在折线图上显示工具提示 "Day Wise"(峰值或低指标)

html - 没有 Javascript 的悬停选项卡

html - 如果子项包含很长的单词,则 Flexbox 父级扩展宽度

node.js - 使用 highcharts 在服务器端生成 svg

CSS transform Scale 平移对象,如何避免?