Question

是否可以将此代码编写得更紧凑？我有一张桌子，我想旋转。然而，我正在使用四个不同的对象：TableWithCharisW..S

<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- objects -->
        <rect id="Chair" width="40" height="40" />
        <rect id="Table" width="130" height="65" />
        <g id="TableWithChairs">
            <use xlink:href="#Table" />
            <use xlink:href="#Chair" x="12.5" y="70" />
            <use xlink:href="#Chair" x="77.5" y="70" />
        </g>
        <use id="TableWithChairsW" xlink:href="#TableWithChairs" transform="rotate(90) translate(0, -65)" />
        <use id="TableWithChairsN" xlink:href="#TableWithChairs" transform="rotate(180) translate(-130, -65)" />
        <use id="TableWithChairsE" xlink:href="#TableWithChairs" transform="rotate(-90) translate(-130, 0)" />
        <use id="TableWithChairsS" xlink:href="#TableWithChairs" />
    </defs> 

    <!-- room background -->
    <rect x="0" y="0" width="704" height="702" fill="white"/>

    <!-- tables vertical -->
    <use xlink:href="#TableWithChairsE" x="497" y="117" />
    <use xlink:href="#TableWithChairsE" x="497" y="247" />
    <use xlink:href="#TableWithChairsW" x="142" y="117" />
    <use xlink:href="#TableWithChairsW" x="142" y="247" />

    <!-- tables horizontal -->
    <use xlink:href="#TableWithChairsN" x="207" y="117" />
    <use xlink:href="#TableWithChairsN" x="337" y="117" />
    <use xlink:href="#TableWithChairsS" x="207" y="312" />
    <use xlink:href="#TableWithChairsS" x="337" y="312" />
</svg>

Answer 1

如果你摆脱4个中间阶段E，W，N，S并将变换属性直接放在垂直和水平表的标签上，它会更紧凑。但它也不那么模块化，更难以理解，所以你可能不想这样做。我不认为有一种方法可以使它更紧凑，而不会失去每次旋转只做一次的优点（除非你把长名称缩短为“使其更紧凑”）： - ）

我怎么能写这个SVG文件更紧凑？

1 个答案: