77997


### 現状

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

hoge.php

[code]

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

index.html

[code]

    <?php include('hoge.php'); ?>
    
[/code]

### やりたいこと

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

### 試したこと

index.html

[code]

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

invalid property errorになりました。

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

  * svgタグそのものを読み込んで表示する方法はありますか？
  * あるいは、PHPで疑似的にSVGファイルを出力したように見せかけ、そのファイルパスを指定するようなことはできますか？
  * そもそもの大前提として、background-image: url()で、ドキュメントルートより上に配置しているファイルを指定することはできますか？


CC BY-SA 4.0
2021-07-05T12:26:07.863
77995
2021-07-05T19:26:53.817
2021-07-05T15:16:57.677
3060
7886
question
php css svg
CSSで、ドキュメントルートより上に配置しているSVGタグそのものを読み込む方法はありますか？


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

[code]

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

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

[code]

    <style>
    .test:before {
        background-image: url(./hoge.php);
        （以下省略）
    
[/code]

###### 補足

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


CC BY-SA 4.0
2021-07-05T19:26:53.817
77997
2021-07-05T19:26:53.817
46944
77995
answer