html - 只有三个路径的简单 SVG 在 chrome 中未正确绘制
问题描述
我有以下简单的 SVG 文件,它绘制了三条对角线:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; fill-rule:evenodd; "
viewBox="0 0 6989 5119"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="#000000" d="M4409 930c63,37 125,74 187,112 -1,1 -2,3 -3,4 -62,-37 -124,-74 -187,-111 1,-2 2,-3 3,-5z"/>
<path fill="#000000" d="M4426 906c62,37 124,74 186,111 -1,2 -2,4 -3,5 -62,-37 -124,-74 -186,-111 1,-2 2,-4 3,-5z"/>
<path fill="#000000" d="M4442 881c62,38 124,75 186,112 -1,2 -2,3 -3,5 -62,-37 -124,-74 -186,-112 1,-1 2,-3 3,-5z"/>
</svg>
为了在 HTML 文件中显示 SVG,我添加了以下 html 标签:
<object height="1080px" type="image/svg+xml" data="test.svg"></object>
在 Firefox 中,一切都按预期工作,请参见下图。
在 Chrome 中,中间的行有问题(见下图)。
为什么这在 Chrome 和 Firefox 中有所不同?如何让 Chrome 正确画线?
解决方案
如果将中间线更改为
<path fill="#000000" d="M4426 906c62,37 124,74 186,111 -1,2 -2,4 -3,5 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>
它将在两种浏览器中正常工作。
推荐阅读
- java - 使用反射在Java中将函数作为参数传递
- c# - 文本文件:逐行读取文件
- c# - 如何通过roslyn检查两种方法是否匹配签名?
- node.js - 当其中一项事务的条件失败时,dynamodb 中的所有事务都失败
- java - Spring security 2step 认证(用户名密码认证和 Otp 验证)
- c++ - 表达式必须有一个常量值第 17 行
- varnish - 为什么在 vcl_deliver 中不能使用 header.copy?
- mysql - 使用 SQL 将数据插入数据库时更改“时间戳”中的时区
- php - 关于使用 Foreach 更新值的问题
- google-apps-script - Google App Script Contact API 无法删除联系人