向SVG <use>标签添加新节点

Question

第一次使用defs，想要做的是使用defs构建基础模板，然后在使用它时通过添加更多内部标签来自定义它。

这是否可行？因为当我在Firefox中尝试这样做时，它不会呈现我放置在use标记下的任何标记。例如：

<?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>

- ChrisInCambo

Answer 1

这不是直接使用就能实现的。use元素可以包含描述和动画元素，但它不像XBL容器那样行为。

如果你的目标是火狐浏览器，你可以使用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>

- Pete Kirkham