我需要在Jupyter笔记本中显示一些svgs。我使用以下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>
,但这并没有改进它。
是否可以将两个svgs放在同一行?
答案 0 :(得分:2)
使用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)))
原始输出(运行代码段以查看笔记本中的内容):
<div style="white-space: nowrap">
<svg height="150" version="1.1" viewBox="0 0 45 45" width="150" 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-width="1.5"><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 height="150" version="1.1" viewBox="0 0 45 45" width="150" 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-width="1.5"></path></g></svg>
</div>
&#13;
替代方案:
output
class in the notebook。这将允许单独调用display
,但会影响notbook中的所有输出单元格。