PHPでテンプレートSVGが表示されない問題の解決方法

Web 開発では画像を使用する必要がよくありますが、SVG (Scalable Vector Graphics) は歪みなく適応的に拡大縮小できる非常に便利な形式であるため、開発者の間でますます好まれています。 PHP には SVG 画像の使用をサポートするライブラリも多数ありますが、SVG 画像が適切に表示されないという問題が発生することがあります。この記事では、PHP でテンプレート エンジンを使用して SVG 画像を読み込むときに、SVG 画像が表示できない問題が発生する状況を紹介し、その解決策を示します。

問題の説明

テンプレート エンジンを使用して SVG 画像を PHP に読み込みますが、ページ上に正常に表示されず、空白の領域のみが表示されます。

問題の原因

SVG 画像のファイル構造は、XML 宣言や名前空間などの特別な属性を含む通常の HTML ファイル構造とは異なります。これらの属性はテンプレート エンジンによってタグとして認識されるため、レンダリング時に問題が発生し、SVG 画像が適切に表示されなくなります。

解決策

オプション 1: テンプレート エンジンによる SVG 画像の解析をオフにする

SVG 画像の解析を無効にするには、テンプレート エンジンを使用することで、解析エラーにより SVG が正しく表示されない問題を回避します。

Smarty を例として、構成ファイルに次の構成を追加できます。

// 关闭对SVG图像的解析
$smarty->security_settings['allowed_tags'] = array_diff($smarty->security_settings['allowed_tags'], array('svg'));
$smarty->security_settings['allowed_modifiers'] = array_diff($smarty->security_settings['allowed_modifiers'], array('svg'));

解決策 2: SVG タグをエスケープする

先頭にエスケープ文字「\」を追加します。 SVG タグの「」を使用すると、テンプレート エンジンが HTML タグに解析するのを防ぐことができ、SVG 画像が適切に表示されない問題を回避できます。

たとえば、次のコード:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M256 22.4C131.4 22.4 27.2 126.6 27.2 251.2S131.4 480 256 480s228.8-104.2 228.8-228.8S380.6 22.4 256 22.4zM256 406.2c-87.9 0-159.8-71.8-159.8-159.8s71.8-159.8 159.8-159.8 159.8 71.8 159.8 159.8S343.9 406.2 256 406.2z"/>
</svg>

を次のコード:

\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  \<path d="M256 22.4C131.4 22.4 27.2 126.6 27.2 251.2S131.4 480 256 480s228.8-104.2 228.8-228.8S380.6 22.4 256 22.4zM256 406.2c-87.9 0-159.8-71.8-159.8-159.8s71.8-159.8 159.8-159.8 159.8 71.8 159.8 159.8S343.9 406.2 256 406.2z"/>
\</svg>

に変換します。この方法では、テンプレート エンジンは SVG タグを HTML タグとして認識せず、レンダリングします。正しくはSVG画像です。

概要

PHP で SVG 画像を使用する場合、特にテンプレート エンジンを使用する場合に、適切に表示できない問題が発生する可能性があります。この記事では、テンプレート エンジンによる SVG 画像の解析をオフにすることと、SVG タグをエスケープすることの 2 つの解決策について説明します。この問題に遭遇した場合、特定の状況に応じて対応する解決策を選択できます。

以上がPHPでテンプレートSVGが表示されない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。