如何在 Jupyter Notebook 的同一行上显示两个 SVG 图像

Posted 2023-03-12

【中文标题】如何在 Jupyter Notebook 的同一行上显示两个 SVG 图像

【英文标题】：How to display two SVG images on the same line in Jupyter notebook

【发布时间】：2017-11-28 20:39:06

【问题描述】：

我需要在 Jupyter 笔记本中显示一些 svg。我使用以下library to get svgs。

import chess
from IPython.display import display
display(chess.Piece.from_symbol("R")), display(chess.Piece.from_symbol("P"))

得到这样的东西：

问题是两个部分都在不同的行上。我需要他们都在同一条线上。我还尝试将它们组合在 html-string <div style="display: inline">one_piece</div><div style="display: inline">other_piece</div> 中，但这并没有改善它。

有什么方法可以将两个 svg 放在同一行吗？

【参考方案1】：

您使用 html 的第二种方法可以工作。没有您身边的任何代码，我不确定为什么没有。由于 SVG 太宽，DIV 可能已换行到下一行。

这是一个工作示例。请注意用于避免换行的 CSS。

代码：

from IPython.core.display import display, HTML
from chess import svg, Piece
piece_size = 150
piece_R_svg = svg.piece(Piece.from_symbol("R"), size=piece_size)
piece_P_svg = svg.piece(Piece.from_symbol("P"), size=piece_size)
no_wrap_div = '<div style="white-space: nowrap"></div>'
display(HTML(no_wrap_div.format(piece_R_svg, piece_P_svg)))

原始输出（运行 sn-p 看看你在笔记本中得到了什么）：

<div style="white-space: nowrap">
<svg  version="1.1" viewBox="0 0 45 45"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g class="white rook" fill="#fff" fill-rule="evenodd" id="white-rook" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-><path d="M9 39h27v-3H9v3zM12 36v-4h21v4H12zM11 14V9h4v2h5V9h5v2h5V9h4v5" stroke-linecap="butt"></path><path d="M34 14l-3 3H14l-3-3"></path><path d="M31 17v12.5H14V17" stroke-linecap="butt" stroke-linejoin="miter"></path><path d="M31 29.5l1.5 2.5h-20l1.5-2.5"></path><path d="M11 14h23" fill="none" stroke-linejoin="miter"></path></g></svg>
<svg  version="1.1" viewBox="0 0 45 45"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g class="white pawn" id="white-pawn"><path d="M22 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38-1.95 1.12-3.28 3.21-3.28 5.62 0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z" fill="#fff" stroke="#000" stroke-linecap="round" stroke-></path></g></svg>
</div>

替代方案：

将 SVG 直接组合成一个 SVG 并绕过 html。 Change the css for the output class in the notebook。这将允许单独调用display，但会影响笔记本中的所有输出单元格。

【讨论】：

非常感谢