Question

我正在研究SVG文件（开始）但是当我设置<defs>标签时我无法显示我的SVG！

我的意思是..如果我直接调用SVG它可以正常工作。

像这样：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
     xml:space="preserve">
<g>
    <rect class="bosta1" y="55.406" fill="#E8CF1E" stroke="#000000" stroke-miterlimit="10" width="163.514" height="137.838"/>
    <rect class="bosta2" x="62.162" fill="#E42326" stroke="#000000" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</svg>

小提琴：https://jsfiddle.net/sz0bkbdm/

但是如果我尝试使用refs，我就无法看到rects。

像这样：

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
     xml:space="preserve">

<defs>
<g>

    <rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
    <rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>

</g>
</defs>
</svg>

MY CONTENT

<svg>
    <use xlink:href="#mySvg"></use>
</svg>

小提琴：https://jsfiddle.net/g1hdLy82/

Answer 1

我猜您正在与<refs>交换<defs>，因为我之前从未听说过<refs>代码。

<强>更新

删除错误的refs/defs，而不是它的作品！

fiddle

更新＃2

好吧，比这样：

<svg>
    <defs>
       <g id="toshow">
           <rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
           <rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>

       </g>
    </defs>
</svg>

<svg>
    <use xlink:href="#toshow"></use>
</svg>

FIDDLE

UDDATE＃3

可能是helpful。

Answer 2

您的问题在这里请遵循此代码

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg">

<defs>
<g>

    <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
    <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>

</g>
</defs>
</svg>

MY CONTENT

<svg >
    <use xlink:href="#ret1"></use>
    <use xlink:href="#ret2"></use>
</svg>

或

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg">

<defs>
<g id="rec1">

    <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
    <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>

</g>
</defs>
</svg>

MY CONTENT

<svg >
    <use xlink:href="#rec1"></use>
</svg>

Answer 3

你可以试试这个：

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
     xml:space="preserve">
<defs>   
    <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
    <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</defs>
</svg>

MY CONTENT

<svg>
    <use xlink:href="#ret1"></use>
    <use xlink:href="#ret2"></use>
</svg>

和css是：

#mySvg { width:100px; height:auto; }
#ret1 { fill:green; stroke:red; }
#ret2 { fill:blue; stroke:white; }

为什么我的SVG呼叫不起作用？

3 个答案: