1

現状

ドキュメントルートより上に、(実質的にはsvgである)hoge.phpを配置しています。
出力したい箇所(html)で、hoge.phpを読み込み、svgを表示しています。

hoge.php

<svg height="" viewBox="" width="" xmlns="http://www.w3.org/2000/svg"><path d=""/></svg>

index.html

<?php include('hoge.php'); ?>

やりたいこと

CSSで、hoge.phpを読み込み、SVG表示したい

試したこと

index.html

<style>
.test:before {
    background-image: url("<?php include('hoge.php'); ?>");

invalid property errorになりました。

background-image: url(ファイルパス/ファイル名.svg); にする必要があるからだと思うのですが、

  • svgタグそのものを読み込んで表示する方法はありますか?
  • あるいは、PHPで疑似的にSVGファイルを出力したように見せかけ、そのファイルパスを指定するようなことはできますか?
  • そもそもの大前提として、background-image: url()で、ドキュメントルートより上に配置しているファイルを指定することはできますか?
3
  • 一般的な PHPはサーバーサイドで動作するけど, サーバーの話ですか?もしもクライアント側なら, JavaScriptで動かせる PHPが存在するかもだけど, その場合 JavaScript/TypeScriptで行うほうがたぶん簡単。
    – oriri
    Commented 2021年7月5日 13:08
  • サーバーの話です。本文に追記しました。
    – re9
    Commented 2021年7月5日 13:34
  • 1
    「ドキュメントルートより上のファイルが参照できるか」と「SVG として出力する PHP を CSS で読み込む」は分けて考えるべきじゃないでしょうか。
    – cubick
    Commented 2021年7月5日 15:17

1 件の回答 1

1

質問文の2番目の方法が実現できます。
質問文の様なhoge.phpが存在するとして、ヘッダにContent-typeを適切にセットすればphpファイルも画像扱いになります。
すなわち、

<?php
  header("Content-type: image/svg+xml");
?>
<svg height="" viewBox="" width="" xmlns="http://www.w3.org/2000/svg"><path d=""/></svg>

(当然ですがsvgタグの内容は単体でsvgファイルとして適切なフォーマットである必要があります)
あとはCSSのbackground-imageでphpファイルを直接指定すれば良いです。

<style>
.test:before {
    background-image: url(./hoge.php);
    (以下省略)
補足

ドキュメント中の要素をIDで指定して背景にしてしまうelementという指定も仕様で勧告されていますが対応しているのは2021年現在firefoxのみです。
https://developer.mozilla.org/en-US/docs/Web/CSS/element()

3

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。