Question

因此，我被要求创建一个静态SVG文件，并被告知使用<defs>和<use>来提高效率。

我知道有代码重复，但我不知道如何减少我拥有的东西并且仍然能够获得相同的输出。

以下是代码：

<!DOCTYPE html>
<html>
<body>

  <center>
    <h1>Static SVG</h1>

    <svg width="200" height="200">

      <!--transforming the group of shapes so that the origin is at the center of the svg image-->
      <g transform="translate(100,100)">

        <!--This is effectively the background-->
        <rect x="-100" y="-100" width="200" height="200" style="fill:grey" />

        <!--Inner rounded rectangle-->
        <rect x="-40" y="-40" rx="5" ry="5" width="80" height="80" style="fill:black" />

        <!--Four inner-most short arrows-->
        <polygon points="0,-60 10,-50 0,-55 -10,-50" style="fill:black;stroke:lime;stroke-width:1" />
        <polygon points="60,0 50,-10 55,0 50,10" style="fill:black;stroke:lime;stroke-width:1" />
        <polygon points="-60,0 -50,10 -55,0 -50,-10" style="fill:black;stroke:lime;stroke-width:1" />
        <polygon points="0,60 10,50 0,55 -10,50" style="fill:black;stroke:lime;stroke-width:1" />

        <!--Middle short arrows-->
        <polygon points="0,-80 10,-70 0,-75 -10,-70" style="fill:red;stroke:black;stroke-width:1" />
        <polygon points="80,0 70,-10 75,0 70,10" style="fill:red;stroke:black;stroke-width:1" />
        <polygon points="-80,0 -70,10 -75,0 -70,-10" style="fill:red;stroke:black;stroke-width:1" />
        <polygon points="0,80 10,70 0,75 -10,70" style="fill:red;stroke:black;stroke-width:1" />

        <!--Outer-most short arrows-->
        <polygon points="0,-100 10,-90 0,-95 -10,-90" style="fill:lime;stroke:black;stroke-width:1" />
        <polygon points="100,0 90,-10 95,0 90,10" style="fill:lime;stroke:black;stroke-width:1" />
        <polygon points="-100,0 -90,10 -95,0 -90,-10" style="fill:lime;stroke:black;stroke-width:1" />
        <polygon points="0,100 10,90 0,95 -10,90" style="fill:lime;stroke:black;stroke-width:1" />

        <!--Longer Arros positioned diagonally from origin-->
        <polygon points="40,50 50,50 50,40 60,60" style="fill:yellow;stroke:black;stroke-width:1" />
        <polygon points="-50,-40 -50,-50 -40,-50 -60,-60" style="fill:yellow;stroke:black;stroke-width:1" />


        <polygon points="50,-40 50,-50 40,-50 60,-60" style="fill:yellow;stroke:black;stroke-width:1" />
        <polygon points="-50,40 -50,50 -40,50 -60,60" style="fill:yellow;stroke:black;stroke-width:1" />

        <!--The elliptical shape in the centre of the rounded Square-->
        <ellipse cx="0" cy="0" rx="20" ry="40" style="fill:white" /> 

      </g>  

    </svg>
  </center>

</body>
</html>

Answer 1

尽管旋转和放置方式不同，但您在大多数情况下绘制相同的多边形。

将样式移至class，您可以使用defs和use，如下所示：

<defs>
    <!-- Define your shape here once -->
    <polygon points="0,-60 10,-50 0,-55 -10,-50" 
             class="inner-arrow" id="inner-arrow" />
</defs>

<!-- Reuse multiple times
     with the rotation (and translation if needed) handled by transform -->
<use xlink:href="#inner-arrow" />
<use xlink:href="#inner-arrow" transform="rotate(90)" />
<use xlink:href="#inner-arrow" transform="rotate(180)" />
<use xlink:href="#inner-arrow" transform="rotate(270)" />

这是DEMO，其中第一个inner arrows代码已更新。

Answer 2

您可以使用和重复使用符号，这些符号可以具有单独的视图框，并可以像组一样旋转和缩放。符号中的单位与viewBox成比例。

这是一个JSFiddle，您的箭头编码并使用符号分组：

<svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
        <symbol id="sm_arrow" viewBox="0 0 20 10">
            <polygon points="10,0 20,10 10,5 0,10" />
        </symbol>
        <symbol id="lg_arrow" viewBox="0 0 200 200">
            <polygon points="0,10 10,10 10,0 20,20" />
        </symbol>
        <symbol id="triple_arrow" viewBox="0 5 200 10">
            <use xlink:href="#sm_arrow"/>
            <use xlink:href="#sm_arrow" transform="translate(0,20)" />
            <use xlink:href="#sm_arrow" transform="translate(0,40)" />
        </symbol>
        <symbol id="arrows" viewBox="0 0 200 200">
            <g id="small_arrows">
                <use xlink:href="#triple_arrow" transform="translate(0,-90)" />
                <use xlink:href="#triple_arrow" transform="translate(290,0) rotate(90)" />
                <use xlink:href="#triple_arrow" transform="translate(200,290) rotate(180)" />
                <use xlink:href="#triple_arrow" transform="translate(-90,200) rotate(-90)" />
            </g>
            <g id="long_arrows" transform="translate(60,60)">
                <use xlink:href="#lg_arrow" transform="translate(80,80)" />
                <use xlink:href="#lg_arrow" transform="translate(0,80) rotate(90)" />
                <use xlink:href="#lg_arrow" transform="rotate(180)" />
                <use xlink:href="#lg_arrow" transform="translate(80,0) rotate(-90)" />
            </g>
        </symbol>
        <g id="background">
            <rect width="200" height="200"/>
            <rect x="60" y="60" rx="5" ry="5" width="80" height="80"/>
            <ellipse cx="100" cy="100" rx="20" ry="40"/> 
        </g>
    </defs>

    <use xlink:href="#background"/>
    <use xlink:href="#arrows"/>
</svg>

将样式转移到CSS块或文件中：

polygon {
    stroke-width: 1;
}
#triple_arrow use:nth-child(1) {
    fill:black;
    stroke:lime;
}
#triple_arrow use:nth-child(2) {
    fill: red;
    stroke: black;
}
#triple_arrow use:nth-child(3) {
    fill: lime;
    stroke: black;
}
#lg_arrow {
    fill:yellow;
    stroke:black;
}
#background rect:nth-child(1) {
    fill:grey;
}
#background rect:nth-child(2) {
    fill:black;
}
#background ellipse {
    fill:white;
}

SVG代码效率

2 个答案: