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

【问题标题】：Adding new nodes to an SVG <use> tag向 SVG <use> 标签添加新节点
【发布时间】：2010-10-03 23:54:36
【问题描述】：

第一次玩 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>

【问题讨论】：

标签： svg

【解决方案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>

【讨论】：