为啥这个 SVG 在 EPUB 文件中不起作用
Posted
技术标签:
【中文标题】为啥这个 SVG 在 EPUB 文件中不起作用【英文标题】：Why this SVG not working in the EPUB file为什么这个 SVG 在 EPUB 文件中不起作用 【发布时间】：2021-08-21 02:36:51 【问题描述】：我的 EBUP 文件中有下面 pandoc 生成的 xhtml：
cat EPUB/text/ch001.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<title>ch001.xhtml</title>
<link rel="stylesheet" type="text/css" href="../styles/stylesheet1.css" />
</head>
<body epub:type="bodymatter">
<section id="valami" class="level1 unnumbered">
<h1 class="unnumbered">valami</h1>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50"> </circle>
</svg>
<svg class="svg-preview" id="m_s2tex_0" style="--latex_align: -0.31706pt; --latex_height: 13px; vertical-align:-0.31706pt; opacity: 1" viewbox="1872.019782 1482.72797 4.782067 7.770859" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <path d="m3.207272-6.981816c0-.261818 0-.283636-.250909-.283636c-.676363 .698182-1.636363 .698182-1.985454 .698182v.338182c.218182 0 .861818 0 1.429091-.283636v5.650908c0 .392727-.032727 .523636-1.014545 .523636h-.349091v.338182c.381818-.032727 1.330909-.032727 1.767272-.032727s1.385454 0 1.767272 .032727v-.338182h-.349091c-.981818 0-1.014545-.12-1.014545-.523636v-6.119998z" id="s7g0-49"> </path> </defs> <g id="s7page1"> <!--start 1872.019782 1490.246126 --> <use x="1872.019782" xlink:href="#s7g0-49" y="1490.246126"> </use> </g>
<script type="text/ecmascript">
if(window.parent.postMessage)window.parent.postMessage("0.31706|6|9.75|"+window.location,"*");
</script>
</svg>
</body>
</html>
</section>
</body>
</html>
它基本上是 2 个简单的 SVG 对象。第一个是专为测试而编写的，它正在工作：
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50"> </circle>
</svg>
第二个是自动生成的，它不起作用。
<svg class="svg-preview" id="m_s2tex_0" style="--latex_align: -0.31706pt; --latex_height: 13px; vertical-align:-0.31706pt; opacity: 1" viewbox="1872.019782 1482.72797 4.782067 7.770859" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <path d="m3.207272-6.981816c0-.261818 0-.283636-.250909-.283636c-.676363 .698182-1.636363 .698182-1.985454 .698182v.338182c.218182 0 .861818 0 1.429091-.283636v5.650908c0 .392727-.032727 .523636-1.014545 .523636h-.349091v.338182c.381818-.032727 1.330909-.032727 1.767272-.032727s1.385454 0 1.767272 .032727v-.338182h-.349091c-.981818 0-1.014545-.12-1.014545-.523636v-6.119998z" id="s7g0-49"> </path> </defs> <g id="s7page1"> <!--start 1872.019782 1490.246126 --> <use x="1872.019782" xlink:href="#s7g0-49" y="1490.246126"> </use> </g>
<script type="text/ecmascript">
if(window.parent.postMessage)window.parent.postMessage("0.31706|6|9.75|"+window.location,"*");
</script>
</svg>
我试图简化第二个，看看为什么不工作，但没有运气。有人知道可能是什么原因吗？
update1: 该文件可以在 Safari 中打开，并且可以正确渲染两个 SVG 图像。我已经上传了截图here。第一个 SVG 是四分之一圆，第二个是数字 1。
【问题讨论】：
你是对的，所有问题都与视图框的完整小写有关。当它设置为 viewBox 时，问题就解决了。一点背景知识：HTML 代码的一个处理点通过 BeautifulSoup 解析，使其成为有效的 XHTML。那里默认的 lxml 解析器将所有内容都变成小写，这是导致问题的原因。 @RobertLongson如果你让你评论一个答案。我会接受的。 【参考方案1】：您已将 viewBox 属性编写为 viewbox。
SVG 和 XHTML 是区分大小写的语言，而 HTML 则不是，如果 EPUB 导入器需要 XHTML，那么这将是一个问题。
【讨论】：
【参考方案2】：我熟悉的大多数 epub 查看器都使用网络引擎进行渲染。因此，要让您的 SVG 在 epub 中可见，它可能需要在网络浏览器中可见。
尝试您的第二个 SVG，我在 Chrome 或 Firefox 中看不到任何内容。或在通用图像查看器中。
如果我在你的路径中添加一个stroke= 值，我会在浏览器中看到“一些东西”，但这是一个很小的东西。好像viewbox 和/或use 设置会混淆浏览器。
【讨论】：
对我来说，我可以从浏览器中看到 SVG，我在 Safari 和 Firefox 中进行了测试。 Firefox 实际上不渲染第一个，它在 EPUB 上工作，而是渲染第二个。我已经上传了一张关于它的图片：sajozsattilahome.files.wordpress.com/2021/06/…。第二个 SVG 图像是数字 1。 但是你看，正确的，问题是看起来像连接到视图框和使用。 哇。我认为浏览器对 SVG 的支持更加一致。我在 Linux 上的 Chrome 和 Firefox 中进行测试； Mac Webkit 显然有不同的行为集。以上是关于为啥这个 SVG 在 EPUB 文件中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？