Question

我的 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" height="13" 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" width="8" 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" height="13" 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" width="8" 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。

Answer 1

您已将 viewBox 属性编写为 viewbox。

SVG 和 XHTML 是区分大小写的语言，而 HTML 则不是，如果 EPUB 导入器需要 XHTML，那么这将是一个问题。

Answer 2

我熟悉的大多数 epub 查看器都使用网络引擎进行渲染。因此，要让您的 SVG 在 epub 中可见，它可能需要在网络浏览器中可见。

尝试您的第二个 SVG，我在 Chrome 或 Firefox 中看不到任何内容。或者在通用图像查看器中。

如果我向您的路径添加一个 stroke= 值，我会在浏览器中看到“某物”，但它只是一个很小的东西。好像 viewbox 和/或 use 设置混淆了浏览器。

为什么这个 SVG 在 EPUB 文件中不起作用

2 个答案: