Jupyterノートブックの同じ行に2つのSVG画像を表示するには

Question

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を同じ行に配置する方法はありますか？

Answer 1

htmlを使用する2番目の方法は動作します。あなたの側からのコードがなければ、私はなぜそれがどうして起こったのか分かりません。 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を1つのSVGに直接結合し、htmlを回避します。
• Change the css for the output class in the notebook。これにより、displayへの別々の呼び出しが可能になりますが、notbookのすべての出力セルに影響します。