svg use叠加引用缩放问题

Question

svg 中分别引用了三个绘制路径的图层。分别尺寸为 120x32， 512x512 和 100x32。

示例代码：

<svg width="320" height="64" viewbox="0 0 320 64" xml:space="preserve">
    <use width="240" height="64" viewbox="0 0 120 32" xlink:href="#Willin"/>
    <use width="64" height="64" viewbox="0 0 512 512" xlink:href="#Logo"/>
    <use x="130" width="200" height="64" viewbox="0 0 100 32" xlink:href="#Wang"/>
</svg>

希望是在320x64的画布上进行摆放。但始终无法缩放元素，如两个文字的高度始终为32，Logo 的高度始终为512 求一个能放在同一个 svg 画板上的解决方法。

引用的原图svg：

<svg version="1.2" baseprofile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
    <defs>
        <!-- 512x512 -->
        <g id="Logo">
            <path id="Circle" d="M258,514C116.6,514,2,399.4,2,258S116.6,2,258,2s256,114.6,256,256S399.4,514,258,514z M258.5,467.4 c115.4,0,208.9-93.5,208.9-208.9S373.9,49.6,258.5,49.6S49.6,143.1,49.6,258.5S143.1,467.4,258.5,467.4z"/>
            <path id="Right-W-Down" d="M322.2,436.4l27.7-95l30.5,61.3C363.4,417.1,343.7,428.6,322.2,436.4L322.2,436.4z"/>
            <path id="Right-W-Up" d="M321.5,79.4c23.3,8.3,44.4,21,62.5,37.1v198.1l-30.2-76.4l-32.3,39.7V79.4L321.5,79.4z"/>
            <path id="Left-W" d="M191.6,435.6c20.7,7.7,43,12,66.4,12v-379c-22.3,0-43.7,3.8-63.5,10.9v235.2l-30.2-76.4L132,277.8V116.4 C93,151.2,68.5,201.7,68.5,258c0,57.3,25.5,108.7,65.7,143.5l29.9-60.1L191.6,435.6L191.6,435.6z"/>
        </g>
        <!-- 120x32 -->
        <g id="Willin">
            <path id="Willin-W" d="M25.8,2.67q.25-.62.5-1.22L26.82.21,33.66,0q-1.2,2.67-2.55,5.85t-2.79,6.69Q26.88,16,25.38,19.77t-2.94,7.44H20.53q-.23.63-.48,1.27t-.48,1.25H17.73a11.53,11.53,0,0,0-1.49.1,26,26,0,0,0-5.12,1V29.06q0-.54,0-1.12a3.7,3.7,0,0,0-.2.48q-.08.24-.18.48-.44-.07-.85-.11L9,28.71,8.44,30q-.3.66-.58,1.33-.88-.09-1.69-.13t-1.6,0l-1.1,0-1,.06-.59.07-.69.07-.65.08L0,31.59Q0,30.41.07,29t.15-3.07q.1-1.62.23-3.38t.31-3.58l0,0q.19-2,.4-4.09t.43-4Q1.78,8.95,2,7.15t.44-3.3L5,3.76q.09-.63.17-1.24l.15-1.17,6.82-.26q-.44,2.78-.76,5.26T10.83,11L11.37,10q.26-.53.54-1,0-.95.14-2.07t.3-2.43l2.53.14Q15,4,15,3.32t.18-1.41l7,.49Q22,4,21.84,5.58t-.33,3.24q.51-1.35,1.13-2.9l1.29-3.2ZM27.25,1q-2.3,5.66-3.36,8.54Q21,17.1,20.44,18.79a98.21,98.21,0,0,1,.95-15.66l-5.55-.37q-.21,1.74-.3,3.64Q14,9.16,12.39,13q-1.32,3.3-2.72,6.66A117.71,117.71,0,0,1,11.25,1.9L6,2.07q-.88,6-1.56,14.15-.69,7.24-.81,12,.9-.12,1.9-.21a24.3,24.3,0,0,1,4.89,0q3-6.71,4.55-10.05-.21,6.24-.18,9.37a26.14,26.14,0,0,1,4.5-.84q1.32-.09,2.72-.07Q27.84,11.5,32.55.81Z"/>
            <path id="Willin-I" d="M38.64,3.73q.23-.63.44-1.26l.4-1.2,5.89-.09q-.51,1.51-1,3.08t-1,3.11q-.47,1.54-.89,3t-.77,2.77l-.66,2.59q-.34,1.36-.67,2.76t-.62,2.77q-.3,1.37-.56,2.64l-2.41.21q-.09.62-.21,1.19t-.23,1.13l-6,.51q.28-1.41.6-2.9t.65-3q.33-1.49.69-2.93t.7-2.72q.37-1.34.8-2.81t.91-3q.47-1.51,1-3t.94-2.85ZM40,2q-1.88,5.48-3.29,10.83Q35.24,18,34.14,23.61l4.48-.39q1-5.06,2.36-10Q42.36,8,44.37,2Z"/>
            <path id="Willin-L" d="M56.25,23.4l-1,.17-1.15.17-.7,2.16-1.3.21-1.48.21-1.51.19-1.41.14-1.41.1-1.47.07-1.42,0-1.23,0q.26-1.42.58-2.91t.66-3q.34-1.48.69-2.89t.7-2.72q.37-1.34.79-2.81t.89-3q.47-1.51.94-3t.95-2.84l2,0q.23-.63.44-1.26t.39-1.24l5.89-.09q-.51,1.53-1,3.1t-1,3.09q-.46,1.52-.87,2.94T53.56,13q-.35,1.23-.66,2.45t-.61,2.54l1.14-.06,1.05-.06q.58,0,1.56-.18t2.25-.38Zm1-5.22a29.65,29.65,0,0,1-3,.42,26,26,0,0,1-2.88.09q.67-3,1.41-5.66,1.32-5,3.34-11.11L51.73,2q-1.9,5.41-3.34,10.79-1.34,5.13-2.48,10.79,2.21,0,4.82-.23t5-.63Z"/>
            <path id="Willin-L2" d="M72.77,23.4l-1,.17-1.15.17-.7,2.16-1.3.21-1.48.21-1.51.19-1.41.14-1.41.1-1.47.07-1.42,0-1.23,0q.26-1.42.58-2.91T60,21q.34-1.48.69-2.89t.7-2.72q.37-1.34.79-2.81t.89-3q.47-1.51.94-3t.95-2.84l2,0q.23-.63.44-1.26t.39-1.24l5.89-.09q-.51,1.53-1,3.1t-1,3.09q-.46,1.52-.87,2.94T70.08,13q-.35,1.23-.66,2.45t-.61,2.54L70,17.89,71,17.82q.58,0,1.56-.18t2.25-.38Zm1-5.22a29.65,29.65,0,0,1-3,.42,26,26,0,0,1-2.88.09q.67-3,1.41-5.66,1.32-5,3.34-11.11L68.26,2q-1.9,5.41-3.34,10.79-1.34,5.13-2.48,10.79,2.21,0,4.82-.23t5-.63Z"/>
            <path id="Willin-I2" d="M83.39,3.73q.23-.63.44-1.26l.4-1.2,5.89-.09q-.51,1.51-1,3.08t-1,3.11q-.47,1.54-.89,3t-.77,2.77l-.66,2.59q-.34,1.36-.67,2.76t-.62,2.77q-.3,1.37-.56,2.64l-2.41.21q-.09.62-.21,1.19t-.23,1.13l-6,.51q.28-1.41.6-2.9t.65-3q.33-1.49.69-2.93t.7-2.72q.37-1.34.8-2.81t.91-3q.47-1.51,1-3t.94-2.85ZM84.71,2q-1.88,5.48-3.29,10.83Q80,18,78.89,23.61l4.48-.39q1-5.06,2.36-10Q87.12,8,89.12,2Z"/>
            <path id="Willin-N" d="M98.4,26l-1.53-3.9q-.12.46-.23.91t-.19.87l-2.34.21-.25,1.16q-.12.58-.26,1.14l-6,.51q.28-1.27.62-2.67t.69-2.86q.36-1.45.73-2.89l.72-2.79,1-3.5q.47-1.69.95-3.29l-.83-2L94.62,5l-.26-.65L100.65.6l1.92,6q.6-1.74,1.35-3.53l1.65.63q.26-.77.57-1.56T106.8.58l5.06,2q-.35,1-.69,2.14l-.68,2.18q-.33,1.08-.63,2.13t-.54,2q-.74,2.72-1.36,5.63t-1.19,6l-2.51.39-.37,2.14Zm7.73-4q1-5.57,2.44-10.93,1-3.76,2.36-8L107.1,1.6a54.34,54.34,0,0,0-2.29,6.8q-.6,2.3-1.07,4.68L100.09,1.71,95.38,4.54,96,6.06q-1,3.27-2,7-1.44,5.4-2.6,10.48l4.5-.39q.93-3.94,1.76-7.08.19-.67.7-2.51l3.5,9.05Z"/>
        </g>
        <!-- 100x32 -->
        <g id="Wang">
            <path id="Wang-W" d="M25.8,2.67q.25-.62.5-1.22L26.82.21,33.66,0q-1.2,2.67-2.55,5.85t-2.79,6.69Q26.88,16,25.38,19.77t-2.94,7.44H20.53q-.23.63-.48,1.27t-.48,1.25H17.73a11.53,11.53,0,0,0-1.49.1,26,26,0,0,0-5.12,1V29.06q0-.54,0-1.12a3.7,3.7,0,0,0-.2.48q-.08.24-.18.48-.44-.07-.85-.11L9,28.71,8.44,30q-.3.66-.58,1.33-.88-.09-1.69-.13t-1.6,0l-1.1,0-1,.06-.59.07-.69.07-.65.08L0,31.59Q0,30.41.07,29t.15-3.07q.1-1.62.23-3.38t.31-3.58l0,0q.19-2,.4-4.09t.43-4Q1.78,8.95,2,7.15t.44-3.3L5,3.76q.09-.63.17-1.24l.15-1.17,6.82-.26q-.44,2.78-.76,5.26T10.83,11L11.37,10q.26-.53.54-1,0-.95.14-2.07t.3-2.43l2.53.14Q15,4,15,3.32t.18-1.41l7,.49Q22,4,21.84,5.58t-.33,3.24q.51-1.35,1.13-2.9l1.29-3.2ZM27.25,1q-2.3,5.66-3.36,8.54Q21,17.1,20.44,18.79a98.21,98.21,0,0,1,.95-15.66l-5.55-.37q-.21,1.74-.3,3.64Q14,9.16,12.39,13q-1.32,3.3-2.72,6.66A117.71,117.71,0,0,1,11.25,1.9L6,2.07q-.88,6-1.56,14.15-.69,7.24-.81,12,.9-.12,1.9-.21a24.3,24.3,0,0,1,4.89,0q3-6.71,4.55-10.05-.21,6.24-.18,9.37a26.14,26.14,0,0,1,4.5-.84q1.32-.09,2.72-.07Q27.84,11.5,32.55.81Z"/>
            <path id="Wang-A" d="M38.74,26.1l.18-3A4.8,4.8,0,0,0,38.1,23l-.83,0L36.84,24l-2,.18L34,26.53,28,27q.9-2.09,2.12-4.76t2.66-5.72q1.44-3,3.06-6.37t3.32-6.73l1.62,0,.61-1.22L42,.93l7-.14a162.75,162.75,0,0,0-1.42,22.29l-2.85.23v2.25Zm8.12-3.73A160.74,160.74,0,0,1,48.18,1.56l-5.85.12q-6.8,13.62-10.41,22l4.46-.39,1.39-3.46q.56-.09,1-.12a14,14,0,0,1,3.81.16l-.21,2.92ZM42.94,16a15.25,15.25,0,0,0-2.74,0q-.39,0-.9.12,2.85-6.24,4.38-9.35a45.44,45.44,0,0,0-.54,4.68Q43,13.68,42.94,16Z"/>
            <path id="Wang-N" d="M61.59,26l-1.53-3.9q-.12.46-.23.91t-.19.87l-2.34.21-.25,1.16q-.12.58-.26,1.14l-6,.51q.28-1.27.62-2.67t.69-2.86q.36-1.45.73-2.89l.72-2.79,1-3.5q.47-1.69.95-3.29l-.83-2L57.81,5l-.26-.65L63.84.6l1.92,6q.6-1.74,1.35-3.53l1.65.63Q69,3,69.34,2.16T70,.58l5.06,2q-.35,1-.69,2.14l-.68,2.18Q73.35,7.93,73.05,9t-.54,2q-.74,2.72-1.36,5.63t-1.19,6L67.45,23l-.37,2.14Zm7.73-4q1-5.57,2.44-10.93,1-3.76,2.36-8L70.29,1.6A54.34,54.34,0,0,0,68,8.4q-.6,2.3-1.07,4.68L63.28,1.71,58.57,4.54l.6,1.53q-1,3.27-2,7-1.44,5.4-2.6,10.48l4.5-.39q.93-3.94,1.76-7.08.19-.67.7-2.51L65,22.62Z"/>
            <path id="Wang-G" d="M91.93,23l-2.25.21-.6,2.32L83.57,26l.3-1.09a12.65,12.65,0,0,1-2.15,1,9,9,0,0,1-2.17.45l-.33,0h-.32q-3.45,0-4.31-3.66a12.63,12.63,0,0,1-.22-1.25,10.78,10.78,0,0,1-.08-1.34,14.63,14.63,0,0,1,.18-2.21A21.56,21.56,0,0,1,75,15.49a18.65,18.65,0,0,1,4.25-7.89,15.94,15.94,0,0,1,1.5-1.51,14.82,14.82,0,0,1,1.59-1.21Q85.87,1,89.95.6l.44,0h.46a6,6,0,0,1,3.87,1.2,6.62,6.62,0,0,1,2.11,3.57L93.88,7.63a.44.44,0,0,1,0,.13.17.17,0,0,0,0,.1l-5.43,4.2Q88,9.25,85.87,9.25l-.17,0-.17,0a1.86,1.86,0,0,0-.65.14A10.86,10.86,0,0,0,84,11a12.52,12.52,0,0,0-.61,1.77q-.19.79-.31,1.46A7.34,7.34,0,0,0,83,15.45,4.71,4.71,0,0,0,83,16q0,.24.06.47Q83.37,18,84.73,18H85l.47,0a23.06,23.06,0,0,0,1.23-3.73L89,13.68q.32-.86.62-2l5.71-1.32Zm2.39-11.69-4.17,1q-1.32,4.85-3.2,5.87a5.87,5.87,0,0,1-2.16.54,2.1,2.1,0,0,1-2.46-1.92,9.4,9.4,0,0,1,.35-4,12.76,12.76,0,0,1,2.07-4.32A5.6,5.6,0,0,1,88.63,6Q91.51,5.73,92,8.31l4-3.06Q94.75.93,89.77,1.39q-3.83.32-7.14,4.08a18.48,18.48,0,0,0-4.06,7.44,13.79,13.79,0,0,0-.35,6.87q.84,3.6,4.38,3.3a10,10,0,0,0,5.29-2.25l-.53,1.83,4-.37Z"/>
        </g>
    </defs>
</svg>

https://jsfiddle.net/willin/g...

Answer 1

viewBox 是没办法运用在 use 元素上的，具体可参考文档：https://developer.mozilla.org...

如果要用在画布上再建 viewBox 的话可以考虑再嵌一个 svg 元素进去。另外不太清楚你要怎么摆放元素，因为 240 + 64 + 200 !== 320 所以我就随便挪了一下做了个示例：

https://jsfiddle.net/gerkh96s/3/

这样修改每个 svg 元素的 viewBox, width, height, x, y 都能生效了，你可以试试看。