svg - SVG：如何减少仅风格不同的重复对象？

Question

我用不同的转换和样式绘制了两次复杂的路径。第一次作为没有填充的轮廓，第二次作为没有轮廓的填充，具有不同的变换。

下面是 SVG 代码。请注意，路径是相同的。只是风格和变换不同。有没有办法对此进行优化，以便我只需要定义一次路径？我正在寻找一种方法来定义一个我可以使用两次但找不到任何东西的变量。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="300">
<g opacity="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z" transform="translate(210 150) rotate(6.093) scale(5.22 5.22) translate(0,-14.551)" style="stroke:rgb(255,0,0);stroke-opacity:0.6;stroke-width:1.2;fill:none"/>
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z" transform="translate(20 162) rotate(-6.093) scale(5.22 5.22) translate(0,-14.551)" style="stroke:none;fill-opacity:0.5;fill:rgb(0,0,0)"/>
</g>
</svg>

标签： svg

Answer 1

我已经使用<use>评论中建议的元素解决了这个问题。<defs>在定义路径以防止其被绘制时使用。

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="300">
    <defs>
    <g id='path1' stroke-linecap="round" stroke-linejoin="round" transform="scale(5.22) translate(0,-14.551)">
    <path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z"/>
    </g>
    </defs>
    <use xlink:href="#path1" transform="translate(210 150) rotate(6.093)" style="stroke:rgb(255,0,0);stroke-opacity:0.6;stroke-width:1.2;fill:none"/>
    <use xlink:href="#path1" transform="translate(20 162) rotate(-6.093)" style="stroke:none;fill-opacity:0.5;fill:rgb(0,0,0)"/>   
    </svg>