Question

我的文件index.php上有一些svg定义，位于localhost：8888 / profile / index.php。调用代码以使用svg符号。在我的CSS上，我使用fill：url（/ profile / #l4pButtonPin）设计了这个svg的父div。当我通过以下方式访问我的网站时： “localhost：8888 / profile /”或“localhost：8888 / profile”，fill属性正常填充svg。但是，当我访问我的网站时：“localhost：8888 / profile / index.php”填充属性不起作用。似乎再也找不到网址了。有谁知道如何解决这个问题或解释为什么会发生？（代码片段如下）

index.php上的

片段

<!-- SVG Defs and Symbols -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0"         height="0" style="position:absolute;visibility:hidden">

    <!-- SVG Defs -->
    <defs>

        <!-- Linear gradient Looking for project button -->
        <lineargradient id="l4pButtonPin" x1="0%" y1="100%" x2="0%" y2="0%">
            <stop offset="0" stop-color="#c7d1d6"/>
            <stop offset="0" stop-color="#c8d1d6"/>
            <stop offset="0.22" stop-color="#e0e5e8"/>
            <stop offset="0.46" stop-color="#f1f4f5"/>
            <stop offset="0.7" stop-color="#fcfcfd"/>
            <stop offset="1" stop-color="#fff"/>
        </lineargradient>
    </defs>

    <!-- Looking for project button -->
    <symbol id="l4pButton" width="38" height="38">
        <rect x="ß8" y="1" rx="12" ry="12" width="22" height="36" />
        <circle cx="19" cy="12" r="11" />
        <!--circle cx="19" cy="26" r="11" /-->
    </symbol>
</svg>

<div>
    <div id="l4p" class="l4p">          
        <svg width="38" height="38">
            <use xlink:href="#l4pButton"/>
        </svg>
        <p>Active</p>
    </div>
</div>`

style.css上的

片段

#l4pButton circle { fill: url(/profile/#l4pButtonPin); }

Answer 1

也许只是引用问题：

fill: url("/profile/#l4pButtonPin");

当网站通过其完整地址访问时，找不到使用网址的CSS样式

1 个答案: