程序员经验分享-hwhale

如何处理 SVG 像素捕捉

2024-01-28

我正在尝试使用路径元素渲染两条 svg 线。 第一行宽度为 1px，并且很锐利 第二条线宽度为 2px，并且很模糊
两者的笔划宽度相同。 如何解决这个问题

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <path style="stroke-width:1;stroke:red;opacity:1;" d="M  300.5  250 L  300.5 300 "></path>
 <path style=" stroke-width:1;stroke:red;opacity:1;" d="M  350    250 L  350  300  "></path> 
</svg>

主要是 0.5 的偏移量使线条变得清晰。默认情况下，整数坐标映射到像素方块的交点。因此，宽度为 1 的水平/垂直线以像素行之间的边界为中心，并延伸到两侧像素的一半。 http://cairographics.org/FAQ/#sharp_lines

因此，要修复第二行，请将坐标添加 0.5 或使用样式shape-rendering: crispEdges。注意清晰的边缘 http://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty防止抗锯齿，水平/垂直线清晰，但倾斜线看起来块状。

此外，笔划宽度 = 1 也不是有效的 CSS 语法。第一个示例描边宽度：1是正确的。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

SVG

Pixel

snapping

如何处理 SVG 像素捕捉 的相关文章

  • 使用 BufferedImages 获取图像每个像素的颜色

    我试图获取图像的每个像素的每种颜色 我的想法如下 int pixels BufferedImage image image ImageIO read this getClass getResources image png int pixe

  • 如何在 Imagick 中读取 SVG 字符串？

    我有一个包含 svg 元素标记的字符串

  • 黑白 PNG 转 SVG

    我有一个河流 土地掩码来区分土地与河流 湖泊 该文件的大小为 W 43 200x H 21 600 由于 RAM 立即填满 因此无法打开该文件 我已将文件分成 3600 3600 块 它们可以正常打开 然而 我试图在谷歌地图中绘制陆地上的文

  • 使用 D3.js 解析时间序列数据

    是时候寻求帮助了 我已经学习 D3 js 几个星期了 我才开始觉得我理解了其中的 10 哈哈哈 我正在尝试生成一个非常简单的线图 只要数据非常简单 我就可以做到这一点 但我的原始数据源具有 UTC 时间戳和实数 小数 这会导致任何超出简单范

  • 如何在 vue.js 中使用 SVG.js 插件？

    我在用svg js在我的 Laravel 项目中运行vue js 这就是我使用的方式svg js Step 1 安装svg js作为我的 vue 应用程序中的插件 import svgJs from svg js dist svg expo

  • 内联 svg 不显示在 xhtml 中

    我创建了一个带有内联 SVG 的 XHTML 文件 当测试为 XHTML 时 它不会显示 但当测试为 HTML 时 它会显示 我已经搜索过互联网并相信我已经指定了正确的名称空间等 但是 我很困惑为什么它没有显示 请帮助我理解我做错了什么 注

  • 将元素添加到 D3 圆包节点

    我正在尝试制作一个可缩放的圆形包装图 我希望每个子圆圈包含一个较小的图表 该图表始终具有相同的结构 即 4 列 只有条形的高度会改变 我尝试添加一个简单的rect到目前为止我的图表 但矩形没有添加到圆圈中并且是静态的 JS var marg

  • 在 D3 中在外部加载的 svg 图形上绘图

    我已经从 svg 文件加载了外部图形 我想尝试在其上绘图 但不知道如何操作 我的简单 d3 代码在这里

  • 检测 SVGAnimatedString 的类名

    我在构建 SVG 地图时遇到问题 触发的功能 g 上的 onmouseover 不起作用 我当时用的 window onmouseover function e console log e target className 查看类名是否有问

  • 使用“SVG 多边形”悬停状态在“SVG”之后淡入 div

    有没有一个只用CSS来解决这个问题的方法 我希望能够在 SVG 之后淡入 div 但前提是用户将鼠标悬停在 SVG 多边形上 代码看起来像这样

  • 为什么媒体查询中的 CSS 旋转不会旋转回来

    我有一个 SVG 其中一些元素根据媒体查询进行旋转 如下所示 media max width 480px rect transform rotate 10deg 该元素旋转得很好 但 至少在 Chrome 中 它拒绝返回 这是为什么 其他指

  • 如何使用 Selenium webdriver 测试对 SVG 对象的点击？

    我正在尝试编写代码来检查单击 SVG 对象的功能 例如此 URL 上的美国州 http www amcharts com svg maps map usa 这可行 但是有更好的方法吗 不需要物理移动鼠标的东西 robert new Robo

  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr

  • 像素到厘米？

    我只是想知道像素单位是否是不变的 以及我们是否可以从像素转换为厘米 如同这个问题 https stackoverflow com questions 139655 how to convert pixels to points px to

  • 在 HTML5 中使用 JS 创建内联 SVG

    我正在使用本地 HTML5 文件 它有在顶部 我在里面放了这样的东西

  • 在 Java 中使用 Batik 检查和删除 SVG 中的属性

    这个问题基本上说明了一切 如何检查 SVG 是否具有 viewBox 属性 我正在使用蜡染库 我需要这个 因为我需要 至少 通知用户有一个 viewBox 属性 我可以删除它吗 使用 org w3c dom 类 您可以按照以下方式做一些事情

  • GeoJson 世界数据库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 需要使用 d3 js 显示国家和城市的地图 实际上 D3支持GeoJson格式 通常

  • 如何在 SVG 中显示 unicode？

    以 SVG 格式存储在数据库中的信息 如果数据包含文本 它将显示为 Unicode 有必要在浏览器中正确显示 SVG 文件

  • d3.event.translate 在触摸设备的缩放上包含 NaN

    我使用 d3 为我的 svg 编写了一个自定义缩放函数 如下所示 Zoom behavior function myzoom xpos d3 event translate 0 ypos d3 event translate 1 vis a

  • 增加 D3 图中边缘的可点击区域

    我有一个由 d3 制作的图 dagre d3 位于其顶部用于绘制有向图 这给出了我对渲染图表的期望 要编辑构建图表的数据 每个元素都是可单击的 这对于使用标签渲染边缘的情况来说很好 但它们并不总是有标签 导致未标记的边缘很难单击进行编辑 分

随机推荐

  • 避免重复输入 mysql 数据库的最佳方法

    我有一个包含 3 列的表 id pk pageId fk 名称 我有一个 php 脚本 它将大约 5000 条记录转储到表中 其中大约一半是重复的 具有相同的 pageId 和名称 pageId 和名称的组合应该是唯一的 当我在 php 中

  • 使用预填充表单，仅提交更改的字段

    我有一个使用选择和文本输入的 html 表单 该表单预先填充了默认值 如何仅提交用户更改默认值的输入 请注意 该页面将存储在空间有限的嵌入式系统中 因此不可能使用 javascript 库 示例 HTML

  • 我正在与 requirejs 优化器和非 AMD 模块作斗争

    我正在与 requirejs 优化器作斗争 如果我只是将其加载到浏览器中而不进行优化 则该代码将起作用 如果我运行优化器 我会得到 ENOENT no such file or directory C Users dev checkout

  • ServletContainerInitializer 中 contextDestroyed() 的等价物是什么？

    我必须创建一个实现的类ServletContextListener https docs oracle com javaee 7 api javax servlet ServletContextListener html在Tomcat初始化

  • 模板中的 Latex 指令导致“unicode 转义错误”

    我想在 play Framework 2 0 模板中包含一些 LaTEX 代码 即 usepackage T1 fontenc usepackage latin9 inputenc usepackage babel 当然玩抱怨error i

  • 当属性名称包含空格和保留字时，将 JSON 映射到 C# 类

    我正在使用 REST API 服务 在服务响应 JSON 中 存在包含空格和保留字的属性名称 我试图将其映射到 C 类 但无法分配与字段名称相同的属性名称 目前 只有当字段的 JSON 属性和 C 类名完全匹配时 映射才会成功 否则该值将如

  • 如何仅使用 math.h 将双精度数转换为字符串？

    我正在尝试将双精度数转换为本机 NT 应用程序中的字符串 即仅依赖于ntdll dll 不幸的是 ntdll 的版本vsnprintf不支持 f等 迫使我自己实现转换 之前所提ntdll dll只出口其中的一小部分math h功能 floo

  • 如何在单个浏览器页面上向 Dash 应用程序添加多个图表？

    如何在同一页面上添加多个图中显示的图表 我试图将 html Div 组件添加到以下代码中以更新页面布局 以在单页上添加更多图形 但这些新添加的图形不会显示在页面上 只有旧图形显示在图片中可见 我应该修改什么元素 比如说在浏览器上的破折号应用

  • maven-shade-plugin 报告：创建着色 jar 时出错：...target/classes（是一个目录）

    当使用 m2eclipse 工具在 eclipse 中为配置为以下项目的项目运行 Maven 构建时Maven 阴影插件 https maven apache org plugins maven shade plugin 构建失败并显示以下

  • ResponseEntity 不接受文本/csv：Spring Boot

    我正在尝试创建一个接受 CSV 和 json 正文请求等文件的 API 我尝试使用ResponseEntitySpring Boot 中的对象 端点如下所示 PostMapping value csv consumes MediaType

  • 左侧 div 在 bootstrap 中未正确对齐[重复]

    这个问题在这里已经有答案了 我的代码中已经有粘性标头 我正在尝试在左侧添加一个粘性 div 最初看起来不错 当我尝试滚动内容时 布局正在改变 此外 在最小尺寸 移动尺寸 时 左侧 div 未正确对齐 请建议 var onResize fun

  • 如何通过 RxJs 合并或 groupBy toPromise？

    我有以下方法返回结果 如下所示 result status 200 status 200 status 400 我需要使用状态值对结果进行分组 并且对于上面的示例结果仅返回 2 个结果 而不是 3 个 update this demoSer

  • 这个Makefile 有什么问题吗？

    当我在以下 Makefile 上运行 make all 时 出现此错误 Makefile 5 缺少分隔符 停止 这是什么问题以及如何修复它 LEX lex YACC yacc CC gcc calcu y tab o lex yy o CC

  • GCC 左移溢出

    下面的小程序在 Mac 上使用 GCC 版本 4 2 1 Apple Inc build 5664 非常尴尬 include

  • Node+Express+MongoDB Native Client 性能问题

    我正在使用 MongoDB 测试 Node js ExpressJS Fastify Python Flask 和 Java 带有 webflux 的 Spring Boot 的性能 我将所有这些示例应用程序相继托管在同一台服务器上 因此所

  • 如何调试 GLSL 着色器？

    我需要调试 GLSL 程序 但我不知道如何输出中间结果 是否可以使用 GLSL 进行一些调试跟踪 例如使用 printf 而不使用像 glslDevil 这样的外部软件 您无法轻松地从 GLSL 内部与 CPU 进行通信 使用 glslDe

  • 如何仅显示一次网站预加载器

    我向我的网站添加了预加载器 每次访问该网站时都会播放预加载器动画 我希望它在每次访问域名时只播放一次 任何点击网站上的主页按钮或浏览器中的后退按钮我希望跳过预加载器 我希望它在任何时候在新选项卡或新浏览器窗口中打开时都显示出来 我尝试添加c

  • Python 日志记录：覆盖日志时间

    下列的Python 的文档 http docs python org library logging html logging Formatter formatTime 我正在尝试覆盖logging Formatter converter以

  • 新类型比枚举更快吗？

    根据本文 http www haskell org haskellwiki Performance Data types 就 GHC 而言 枚举不算作单构造函数类型 因此当用作严格构造函数字段或严格函数参数时 它们不会从解包中受益 这是 G

  • 如何处理 SVG 像素捕捉

    我正在尝试使用路径元素渲染两条 svg 线 第一行宽度为 1px 并且很锐利 第二条线宽度为 2px 并且很模糊两者的笔划宽度相同 如何解决这个问题

热门标签