如何在Jupyter筆記本的同一行上顯示兩個SVG圖像

Question

我需要在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放在同一行？

Answer 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))) 

原始輸出（運行片段，看看你的筆記本電腦獲得）：

<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>

替代方案：

• 將SVG直接結合到單個SVG中並解決html問題。
• Change the css for the output class in the notebook。這將允許單獨調用display，但會影響notbook中的所有輸出單元。