Question

只是玩defs并第一次使用。我想要做的是使用defs来构建一个基本模板，然后当我使用它时通过添加更多的内部标签来定制它。

这是否可行，因为当我尝试在Firefox中执行此操作时，它不会呈现我作为子项放置到use标记的任何标记。 e.g：

<?xml version="1.0" standalone="no"?>
<svg width="10000px" height="5500px" version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <g id="storyCard">
            <rect width="800px" height="500px" fill="#ffff00" />
            <path d="M 20 120 L 780 120 M 640 20 L 640 120" stroke-width="6px" stroke="black" fill="none" />
        </g>
    </defs>

    <!-- White Board -->
    <path d="M 0 0 L 10000 0 L 10000 550 L 0 5500 z M 2000 0 L 2000 5500" stroke-width="20px" stroke="black" fill="none" />
    <use xlink:href="#storyCard" transform="translate(100,100)" />
    <use xlink:href="#storyCard" transform="translate(1000,200)" >
            <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive">
                My Dummy Story
            </text>
    </use>
</svg>

Answer 1

使用时无法直接使用。 use element可以包含描述和动画元素，但它的行为不像XBL容器。

如果你的目标是firefox，可以使用XBL。

要保持在SVG内，请创建一个组并使用背景：

    <g transform="translate(1000,200)" >
        <use xlink:href="#storyCard"/>
        <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive">
            My Dummy Story
        </text>
    </g>

将新节点添加到SVG <use>标记</use>

1 个答案: