このブログの更新は Twitterアカウント @m_hiyama で通知されます。
Follow @m_hiyama

メールでのご連絡は hiyama{at}chimaira{dot}org まで。

はじめてのメールはスパムと判定されることがあります。最初は、信頼されているドメインから差し障りのない文面を送っていただけると、スパムと判定されにくいと思います。

［参照用 記事］

はてなブログ内に数式を埋め込んだSVG図形を表示する

雑記／備忘

こんな感じです。

円：
$`\text{for }x, y\in {\bf R}\\ x^2 + y^2 = r^2`$

内容：

ステップ 1： SVG要素を置くだけ
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
  width="400" height="200" 
  viewBox="0 0 400 200" 
  style="background-color: lightpink"
>
  <circle cx = "100" cy = "60" r="50" fill="blue" fill-opacity="0.4" />
</svg>

こういう(↑)SVG要素をブログ内にそのまま置きます*1。表示されます。(↓)


ステップ 2： 数式が表示されることを確認

はてな記法の数式ではXyJaxが使えない問題がある（「MathJax/XyJax問題、さらにその後」参照）ので、今はMathJaxを自前でロード＆設定しています。次のように書くと数式がレンダリングされます。

$`\text{for }x, y\in {\bf R}\\
x^2 + y^2 = r^2`$

$`\text{for }x, y\in {\bf R}\\
x^2 + y^2 = r^2`$

ステップ 3： SVG foreignObject内にXHTMLフラグメントを書く

SVG:svg要素（SVG仕様のsvg要素）内には、foreignObject要素でラップしたXHTMLフラグメントを埋め込めます。

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
  width="400" height="200" 
  viewBox="0 0 400 200" 
  style="background-color: lightpink"
>
  <circle cx = "100" cy = "60" r="50" fill="blue" fill-opacity="0.4" />
  <foreignObject x="20" y="110" width="200" height="80"
   requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML のフラグメントをここに書ける -->
      <div xmlns="http://www.w3.org/1999/xhtml">
        円：<br>
        $`\text{for }x, y\in {\bf R}\\
           x^2 + y^2 = r^2`$
      </div>
  </foreignObject>
</svg>

この入れ子になった要素をMathJaxに処理してもらえば、SVG図形内の所定の位置にLaTeX数式が表示されます（通常は）。

が、はてなブログではうまくいきません。数式がSVG図形の外側にはじき出されてしまいます。数式はピンクの箱の外に行ってしまいましたね。


円：

$`\text{for }x, y\in {\bf R}\\
x^2 + y^2 = r^2`$

ステップ 4： さらにラップして段落タグ挿入を抑制する

はてなブログは自動で段落タグ（<p>と</p> ）を挿入するので、ブログ内の生のタグ（HTML/XML要素構文）を壊したり、余分な改行が出力されてしまいます。それが原因で、SVG+XHTML の部分が壊れていたのです。段落タグ挿入を抑制するには、><タグ> ... </タグ><というはてなブログ固有のマークアップをする必要があります。

SVG要素に段落タグ挿入抑制をすればいいと思ったのですが、それではうまくいきません。SVG要素をdivタグで囲んで、div要素に段落タグ挿入抑制をします。

><div width="300" height="200" style="style="margin-left:2em">
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
  width="400" height="200" 
  viewBox="0 0 400 200" 
  style="background-color: lightpink"
>
  <circle cx = "100" cy = "60" r="50" fill="blue" fill-opacity="0.4" />
  <foreignObject x="20" y="110" width="200" height="80"
   requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML のフラグメントをここに書ける -->
      <div xmlns="http://www.w3.org/1999/xhtml">
        円：<br>
        $`\text{for }x, y\in {\bf R}\\
           x^2 + y^2 = r^2`$
      </div>
  </foreignObject>
</svg>
</div><

これで冒頭の表示が得られます。

*1:HTML文書内にSVG図形を埋め込む場合はSVG名前空間の宣言は不要です。XLinkの名前空間は、use要素で使う可能性があるのでお約束で書いています。