我有這個低音譜號的 svg 元素影像：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="36.16 204.35 284.921 811.583" width="284.921" height="811.583">
<path d="m200.680145,652.121826c-12.46701,2.556702 -24.020721,9.3974 -35.04837,20.294373c-11.041428,11.096924 -16.951889,23.753906 -17.918106,37.757019c-0.607315,8.802002 1.710495,19.011719 6.794357,30.015381c5.070023,11.203613 13.355072,19.614136 24.440247,25.403992c3.754883,1.063049 5.421631,3.187988 5.228394,5.988647c-0.069,1.000244 -1.541763,1.903564 -5.005981,2.468567c-17.930832,-5.860168 -32.294312,-16.700073 -42.91748,-32.105835c-10.609375,-15.605835 -15.465866,-32.824646 -14.541847,-52.05658c2.023293,-20.563049 9.564827,-39.33844 22.610786,-56.125977c13.2603,-16.973816 29.57074,-28.511169 48.931351,-34.612183l-8.9366,-71.97052c-32.648514,23.474854 -59.550636,48.351257 -80.934525,75.01532c-21.370087,26.46405 -33.480858,55.978943 -36.532852,88.530884c-0.606544,14.63092 1.42141,29.041626 6.097679,43.032043c4.66246,14.190491 12.228981,27.174377 22.671944,39.351807c21.10025,24.168518 49.763901,38.005066 85.576111,41.682068c12.287582,0.043823 25.473907,-1.257263 39.759521,-3.889526l-20.274628,-158.77948zm14.576233,-1.004211l20.668411,155.992676c31.737534,-10.271912 49.041763,-36.212524 51.885178,-77.421692c-0.852386,-13.927612 -4.007233,-26.607117 -10.066132,-38.080017c-5.844543,-11.659058 -14.060577,-21.069824 -24.848618,-28.246094c-10.788025,-7.17627 -23.200623,-11.248657 -37.63884,-12.244873zm-26.75383,-210.882782c6.89357,-3.544281 14.996841,-10.02005 23.894958,-19.254913c8.884293,-9.034882 17.692276,-19.883942 26.195831,-32.161011c8.717896,-12.463287 15.845337,-25.237274 21.382339,-38.322021c5.523193,-12.884705 8.598633,-25.335297 9.39917,-36.937866c0.345093,-5.001129 0.289093,-10.029907 -0.409882,-14.500061c-0.305237,-7.256958 -2.124603,-13.010376 -5.672424,-17.074127c-3.561646,-3.863708 -8.236328,-6.196228 -14.252258,-6.611328c-12.03186,-0.83017 -23.371216,5.82431 -34.018097,19.96344c-8.30304,12.290924 -15.568512,27.065369 -21.167236,43.964783c-5.813049,17.085632 -9.606995,34.109589 -11.208908,51.485779c-0.363815,19.873596 1.726639,36.298584 5.856506,49.447327zm-13.434006,10.730896c-6.787811,-33.029846 -9.523605,-66.383118 -8.207397,-100.059753c1.691254,-21.590942 5.291183,-41.64325 10.799805,-60.156891c5.308075,-18.527435 12.241516,-34.329803 20.827866,-47.807098c8.385849,-13.49118 17.740219,-23.498566 27.86261,-30.036041c9.064499,-5.806458 15.51561,-8.77829 18.924652,-8.54306c2.606888,0.179871 4.743713,1.332306 6.624786,3.271057c1.881088,1.938782 4.28096,5.119324 7.213394,9.341583c21.530457,35.454071 30.746521,77.093323 27.461456,124.703888c-1.559723,22.605042 -6.085999,44.402405 -13.620239,65.992188c-7.319916,21.403595 -17.378235,41.613251 -30.147369,60.228882c-12.983459,18.80188 -27.792801,34.864777 -44.642349,48.374969l10.804672,79.938293c8.892365,-0.391479 14.963501,-0.77655 18.372528,-0.541321c15.240341,1.051575 28.655579,5.193176 40.847321,12.466309c12.191742,7.273132 22.42691,16.622192 30.491089,28.233398c8.078003,11.411255 14.040283,24.284424 17.88681,38.619629c3.646027,14.32135 5.2453,29.104492 4.196289,44.307861c-1.628723,23.605225 -9.335907,44.781128 -23.107697,63.327576c-13.77179,18.546448 -33.401154,31.46283 -59.102432,38.935303c0.927917,9.912903 2.755341,24.309753 5.710419,42.804382c2.740738,18.680847 4.741104,33.491638 6.001068,44.432373c1.259949,10.940735 1.344315,21.398438 0.640366,31.600708c-1.090424,15.803589 -5.866699,29.543701 -14.342651,41.420654c-8.676483,11.863159 -19.766617,20.745789 -33.470932,26.634094c-13.503815,5.902161 -28.176682,8.306641 -43.818085,7.227417c-22.05838,-1.521973 -40.881439,-9.051636 -56.483002,-22.388916c-15.587738,-13.537292 -23.265457,-30.749817 -22.604477,-52.01001c1.25032,-9.360474 4.063484,-18.010254 8.653831,-26.135376c4.59034,-8.125122 10.473953,-14.553101 17.851418,-19.269958c7.19072,-4.930786 15.605728,-7.164124 25.072083,-7.113892c7.820694,0.539612 15.088501,3.252014 21.817215,7.937317c6.514374,4.871399 11.728973,11.060059 15.429413,18.752258c3.499893,7.678406 5.139816,16.03241 4.532501,24.834351c-0.814377,11.802673 -5.515121,21.528076 -14.10228,29.176453c-8.587143,7.648376 -19.10408,11.143738 -31.336456,10.299622l-4.612206,-0.318176c6.992531,12.542297 19.398598,19.629211 37.245842,20.860657c9.02388,0.622559 18.386337,-0.741333 27.859207,-3.705688c9.687195,-3.150513 17.852966,-7.612061 24.91217,-13.556885c7.059219,-5.944885 11.940186,-12.441956 14.241852,-19.518982c3.97496,-7.966553 6.365967,-19.258423 7.345963,-33.461609c0.662552,-9.602112 0.322418,-19.273376 -0.819809,-29.000061c-1.156052,-9.526611 -3.093903,-22.32312 -5.827362,-38.189514c-2.747253,-15.666321 -4.726517,-27.862732 -5.764832,-36.175232c-12.238907,2.170471 -24.782227,2.913025 -37.816742,2.013611c-21.857834,-1.508118 -42.208862,-7.33429 -61.039207,-17.678406c-18.83036,-10.344116 -35.019707,-23.923035 -48.754761,-40.950439c-13.534512,-17.013611 -23.722504,-35.806335 -30.536373,-56.778137c-6.62714,-20.757996 -9.375191,-42.253235 -8.057411,-64.271973c2.210022,-20.349182 7.372784,-39.690674 15.861763,-57.59668c8.502769,-18.106018 18.941837,-35.073425 31.503925,-50.688416c12.562096,-15.61499 25.428627,-29.801971 38.585793,-42.360931c13.343895,-12.345093 30.760139,-28.228119 52.635963,-47.421387z" id="path9" stroke-width="0.602291" stroke="#131516" fill-rule="evenodd" style=""/>
</svg>我想把這些資料放在樂譜中，這是另一個從 midi 資料構建的 svg 元素，它包含其他音符線等，它有自己的 viewBox。
<svg viewBox="0 0 320 3200">
</svg>
如何調整低音譜號大小以適應這個新的 svg？我考慮過劃分路徑資料中的數字以適應新的 svg viewBox，有沒有更好的方法？
我嘗試使用此處描述的符號：https ://css-tricks.com/svg-symbol-good-choice-icons/ ，這是我的產品：
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin" viewBox="0 0 5760 320">
<symbol viewBox="36.16 204.35 284.921 811.583">
<rect x="0" y="0" width="811" height="284" stroke="black" stroke-width="6" fill-rule="evenodd" fill="red"></rect>
</symbol>
<rect width="100%" height="100%" fill="white"></rect>
<line x1="0" y1="80" x2="5760" y2="80" stroke="black" stroke-width="4"></line>
<line x1="0" y1="120" x2="5760" y2="120" stroke="black" stroke-width="4"></line>
<line x1="0" y1="160" x2="5760" y2="160" stroke="black" stroke-width="4"></line>
<line x1="0" y1="200" x2="5760" y2="200" stroke="black" stroke-width="4"></line>
<line x1="0" y1="240" x2="5760" y2="240" stroke="black" stroke-width="4"></line>
<use href="#gclef" fill="red"></use>
</svg>我已經用紅色矩形替換了符號#gclef 的內容以進行除錯，但是使用不會呈現矩形。
如果我輸入路徑資料并渲染譜號，它會渲染，但我無法正確定位它。
uj5u.com熱心網友回復：
您可以將一個元素嵌入為另一個<svg>元素的子元素<svg>。viewBox意志奏效。您可以使用x、y和屬性來調整大小width和height位置。
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin" viewBox="0 0 5760 320">
<rect width="100%" height="100%" fill="white"></rect>
<line x1="0" y1="80" x2="5760" y2="80" stroke="black" stroke-width="4"></line>
<line x1="0" y1="120" x2="5760" y2="120" stroke="black" stroke-width="4"></line>
<line x1="0" y1="160" x2="5760" y2="160" stroke="black" stroke-width="4"></line>
<line x1="0" y1="200" x2="5760" y2="200" stroke="black" stroke-width="4"></line>
<line x1="0" y1="240" x2="5760" y2="240" stroke="black" stroke-width="4"></line>
<svg viewBox="36.16 204.35 284.921 811.583" width="100" x="20">
<path d="m200.680145,652.121826c-12.46701,2.556702 -24.020721,9.3974 -35.04837,20.294373c-11.041428,11.096924 -16.951889,23.753906 -17.918106,37.757019c-0.607315,8.802002 1.710495,19.011719 6.794357,30.015381c5.070023,11.203613 13.355072,19.614136 24.440247,25.403992c3.754883,1.063049 5.421631,3.187988 5.228394,5.988647c-0.069,1.000244 -1.541763,1.903564 -5.005981,2.468567c-17.930832,-5.860168 -32.294312,-16.700073 -42.91748,-32.105835c-10.609375,-15.605835 -15.465866,-32.824646 -14.541847,-52.05658c2.023293,-20.563049 9.564827,-39.33844 22.610786,-56.125977c13.2603,-16.973816 29.57074,-28.511169 48.931351,-34.612183l-8.9366,-71.97052c-32.648514,23.474854 -59.550636,48.351257 -80.934525,75.01532c-21.370087,26.46405 -33.480858,55.978943 -36.532852,88.530884c-0.606544,14.63092 1.42141,29.041626 6.097679,43.032043c4.66246,14.190491 12.228981,27.174377 22.671944,39.351807c21.10025,24.168518 49.763901,38.005066 85.576111,41.682068c12.287582,0.043823 25.473907,-1.257263 39.759521,-3.889526l-20.274628,-158.77948zm14.576233,-1.004211l20.668411,155.992676c31.737534,-10.271912 49.041763,-36.212524 51.885178,-77.421692c-0.852386,-13.927612 -4.007233,-26.607117 -10.066132,-38.080017c-5.844543,-11.659058 -14.060577,-21.069824 -24.848618,-28.246094c-10.788025,-7.17627 -23.200623,-11.248657 -37.63884,-12.244873zm-26.75383,-210.882782c6.89357,-3.544281 14.996841,-10.02005 23.894958,-19.254913c8.884293,-9.034882 17.692276,-19.883942 26.195831,-32.161011c8.717896,-12.463287 15.845337,-25.237274 21.382339,-38.322021c5.523193,-12.884705 8.598633,-25.335297 9.39917,-36.937866c0.345093,-5.001129 0.289093,-10.029907 -0.409882,-14.500061c-0.305237,-7.256958 -2.124603,-13.010376 -5.672424,-17.074127c-3.561646,-3.863708 -8.236328,-6.196228 -14.252258,-6.611328c-12.03186,-0.83017 -23.371216,5.82431 -34.018097,19.96344c-8.30304,12.290924 -15.568512,27.065369 -21.167236,43.964783c-5.813049,17.085632 -9.606995,34.109589 -11.208908,51.485779c-0.363815,19.873596 1.726639,36.298584 5.856506,49.447327zm-13.434006,10.730896c-6.787811,-33.029846 -9.523605,-66.383118 -8.207397,-100.059753c1.691254,-21.590942 5.291183,-41.64325 10.799805,-60.156891c5.308075,-18.527435 12.241516,-34.329803 20.827866,-47.807098c8.385849,-13.49118 17.740219,-23.498566 27.86261,-30.036041c9.064499,-5.806458 15.51561,-8.77829 18.924652,-8.54306c2.606888,0.179871 4.743713,1.332306 6.624786,3.271057c1.881088,1.938782 4.28096,5.119324 7.213394,9.341583c21.530457,35.454071 30.746521,77.093323 27.461456,124.703888c-1.559723,22.605042 -6.085999,44.402405 -13.620239,65.992188c-7.319916,21.403595 -17.378235,41.613251 -30.147369,60.228882c-12.983459,18.80188 -27.792801,34.864777 -44.642349,48.374969l10.804672,79.938293c8.892365,-0.391479 14.963501,-0.77655 18.372528,-0.541321c15.240341,1.051575 28.655579,5.193176 40.847321,12.466309c12.191742,7.273132 22.42691,16.622192 30.491089,28.233398c8.078003,11.411255 14.040283,24.284424 17.88681,38.619629c3.646027,14.32135 5.2453,29.104492 4.196289,44.307861c-1.628723,23.605225 -9.335907,44.781128 -23.107697,63.327576c-13.77179,18.546448 -33.401154,31.46283 -59.102432,38.935303c0.927917,9.912903 2.755341,24.309753 5.710419,42.804382c2.740738,18.680847 4.741104,33.491638 6.001068,44.432373c1.259949,10.940735 1.344315,21.398438 0.640366,31.600708c-1.090424,15.803589 -5.866699,29.543701 -14.342651,41.420654c-8.676483,11.863159 -19.766617,20.745789 -33.470932,26.634094c-13.503815,5.902161 -28.176682,8.306641 -43.818085,7.227417c-22.05838,-1.521973 -40.881439,-9.051636 -56.483002,-22.388916c-15.587738,-13.537292 -23.265457,-30.749817 -22.604477,-52.01001c1.25032,-9.360474 4.063484,-18.010254 8.653831,-26.135376c4.59034,-8.125122 10.473953,-14.553101 17.851418,-19.269958c7.19072,-4.930786 15.605728,-7.164124 25.072083,-7.113892c7.820694,0.539612 15.088501,3.252014 21.817215,7.937317c6.514374,4.871399 11.728973,11.060059 15.429413,18.752258c3.499893,7.678406 5.139816,16.03241 4.532501,24.834351c-0.814377,11.802673 -5.515121,21.528076 -14.10228,29.176453c-8.587143,7.648376 -19.10408,11.143738 -31.336456,10.299622l-4.612206,-0.318176c6.992531,12.542297 19.398598,19.629211 37.245842,20.860657c9.02388,0.622559 18.386337,-0.741333 27.859207,-3.705688c9.687195,-3.150513 17.852966,-7.612061 24.91217,-13.556885c7.059219,-5.944885 11.940186,-12.441956 14.241852,-19.518982c3.97496,-7.966553 6.365967,-19.258423 7.345963,-33.461609c0.662552,-9.602112 0.322418,-19.273376 -0.819809,-29.000061c-1.156052,-9.526611 -3.093903,-22.32312 -5.827362,-38.189514c-2.747253,-15.666321 -4.726517,-27.862732 -5.764832,-36.175232c-12.238907,2.170471 -24.782227,2.913025 -37.816742,2.013611c-21.857834,-1.508118 -42.208862,-7.33429 -61.039207,-17.678406c-18.83036,-10.344116 -35.019707,-23.923035 -48.754761,-40.950439c-13.534512,-17.013611 -23.722504,-35.806335 -30.536373,-56.778137c-6.62714,-20.757996 -9.375191,-42.253235 -8.057411,-64.271973c2.210022,-20.349182 7.372784,-39.690674 15.861763,-57.59668c8.502769,-18.106018 18.941837,-35.073425 31.503925,-50.688416c12.562096,-15.61499 25.428627,-29.801971 38.585793,-42.360931c13.343895,-12.345093 30.760139,-28.228119 52.635963,-47.421387z" id="path9" stroke-width="0.602291" stroke="#131516" fill-rule="evenodd" style=""/>
</svg>
</svg>或者您可以將譜號變成<symbol>，并以這種方式使用它。
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin" viewBox="0 0 5760 320">
<defs>
<symbol id="gclef" viewBox="36.16 204.35 284.921 811.583">
<path d="m200.680145,652.121826c-12.46701,2.556702 -24.020721,9.3974 -35.04837,20.294373c-11.041428,11.096924 -16.951889,23.753906 -17.918106,37.757019c-0.607315,8.802002 1.710495,19.011719 6.794357,30.015381c5.070023,11.203613 13.355072,19.614136 24.440247,25.403992c3.754883,1.063049 5.421631,3.187988 5.228394,5.988647c-0.069,1.000244 -1.541763,1.903564 -5.005981,2.468567c-17.930832,-5.860168 -32.294312,-16.700073 -42.91748,-32.105835c-10.609375,-15.605835 -15.465866,-32.824646 -14.541847,-52.05658c2.023293,-20.563049 9.564827,-39.33844 22.610786,-56.125977c13.2603,-16.973816 29.57074,-28.511169 48.931351,-34.612183l-8.9366,-71.97052c-32.648514,23.474854 -59.550636,48.351257 -80.934525,75.01532c-21.370087,26.46405 -33.480858,55.978943 -36.532852,88.530884c-0.606544,14.63092 1.42141,29.041626 6.097679,43.032043c4.66246,14.190491 12.228981,27.174377 22.671944,39.351807c21.10025,24.168518 49.763901,38.005066 85.576111,41.682068c12.287582,0.043823 25.473907,-1.257263 39.759521,-3.889526l-20.274628,-158.77948zm14.576233,-1.004211l20.668411,155.992676c31.737534,-10.271912 49.041763,-36.212524 51.885178,-77.421692c-0.852386,-13.927612 -4.007233,-26.607117 -10.066132,-38.080017c-5.844543,-11.659058 -14.060577,-21.069824 -24.848618,-28.246094c-10.788025,-7.17627 -23.200623,-11.248657 -37.63884,-12.244873zm-26.75383,-210.882782c6.89357,-3.544281 14.996841,-10.02005 23.894958,-19.254913c8.884293,-9.034882 17.692276,-19.883942 26.195831,-32.161011c8.717896,-12.463287 15.845337,-25.237274 21.382339,-38.322021c5.523193,-12.884705 8.598633,-25.335297 9.39917,-36.937866c0.345093,-5.001129 0.289093,-10.029907 -0.409882,-14.500061c-0.305237,-7.256958 -2.124603,-13.010376 -5.672424,-17.074127c-3.561646,-3.863708 -8.236328,-6.196228 -14.252258,-6.611328c-12.03186,-0.83017 -23.371216,5.82431 -34.018097,19.96344c-8.30304,12.290924 -15.568512,27.065369 -21.167236,43.964783c-5.813049,17.085632 -9.606995,34.109589 -11.208908,51.485779c-0.363815,19.873596 1.726639,36.298584 5.856506,49.447327zm-13.434006,10.730896c-6.787811,-33.029846 -9.523605,-66.383118 -8.207397,-100.059753c1.691254,-21.590942 5.291183,-41.64325 10.799805,-60.156891c5.308075,-18.527435 12.241516,-34.329803 20.827866,-47.807098c8.385849,-13.49118 17.740219,-23.498566 27.86261,-30.036041c9.064499,-5.806458 15.51561,-8.77829 18.924652,-8.54306c2.606888,0.179871 4.743713,1.332306 6.624786,3.271057c1.881088,1.938782 4.28096,5.119324 7.213394,9.341583c21.530457,35.454071 30.746521,77.093323 27.461456,124.703888c-1.559723,22.605042 -6.085999,44.402405 -13.620239,65.992188c-7.319916,21.403595 -17.378235,41.613251 -30.147369,60.228882c-12.983459,18.80188 -27.792801,34.864777 -44.642349,48.374969l10.804672,79.938293c8.892365,-0.391479 14.963501,-0.77655 18.372528,-0.541321c15.240341,1.051575 28.655579,5.193176 40.847321,12.466309c12.191742,7.273132 22.42691,16.622192 30.491089,28.233398c8.078003,11.411255 14.040283,24.284424 17.88681,38.619629c3.646027,14.32135 5.2453,29.104492 4.196289,44.307861c-1.628723,23.605225 -9.335907,44.781128 -23.107697,63.327576c-13.77179,18.546448 -33.401154,31.46283 -59.102432,38.935303c0.927917,9.912903 2.755341,24.309753 5.710419,42.804382c2.740738,18.680847 4.741104,33.491638 6.001068,44.432373c1.259949,10.940735 1.344315,21.398438 0.640366,31.600708c-1.090424,15.803589 -5.866699,29.543701 -14.342651,41.420654c-8.676483,11.863159 -19.766617,20.745789 -33.470932,26.634094c-13.503815,5.902161 -28.176682,8.306641 -43.818085,7.227417c-22.05838,-1.521973 -40.881439,-9.051636 -56.483002,-22.388916c-15.587738,-13.537292 -23.265457,-30.749817 -22.604477,-52.01001c1.25032,-9.360474 4.063484,-18.010254 8.653831,-26.135376c4.59034,-8.125122 10.473953,-14.553101 17.851418,-19.269958c7.19072,-4.930786 15.605728,-7.164124 25.072083,-7.113892c7.820694,0.539612 15.088501,3.252014 21.817215,7.937317c6.514374,4.871399 11.728973,11.060059 15.429413,18.752258c3.499893,7.678406 5.139816,16.03241 4.532501,24.834351c-0.814377,11.802673 -5.515121,21.528076 -14.10228,29.176453c-8.587143,7.648376 -19.10408,11.143738 -31.336456,10.299622l-4.612206,-0.318176c6.992531,12.542297 19.398598,19.629211 37.245842,20.860657c9.02388,0.622559 18.386337,-0.741333 27.859207,-3.705688c9.687195,-3.150513 17.852966,-7.612061 24.91217,-13.556885c7.059219,-5.944885 11.940186,-12.441956 14.241852,-19.518982c3.97496,-7.966553 6.365967,-19.258423 7.345963,-33.461609c0.662552,-9.602112 0.322418,-19.273376 -0.819809,-29.000061c-1.156052,-9.526611 -3.093903,-22.32312 -5.827362,-38.189514c-2.747253,-15.666321 -4.726517,-27.862732 -5.764832,-36.175232c-12.238907,2.170471 -24.782227,2.913025 -37.816742,2.013611c-21.857834,-1.508118 -42.208862,-7.33429 -61.039207,-17.678406c-18.83036,-10.344116 -35.019707,-23.923035 -48.754761,-40.950439c-13.534512,-17.013611 -23.722504,-35.806335 -30.536373,-56.778137c-6.62714,-20.757996 -9.375191,-42.253235 -8.057411,-64.271973c2.210022,-20.349182 7.372784,-39.690674 15.861763,-57.59668c8.502769,-18.106018 18.941837,-35.073425 31.503925,-50.688416c12.562096,-15.61499 25.428627,-29.801971 38.585793,-42.360931c13.343895,-12.345093 30.760139,-28.228119 52.635963,-47.421387z" id="path9" stroke-width="0.602291" stroke="#131516" fill-rule="evenodd" style=""/>
</symbol>
</defs>
<rect width="100%" height="100%" fill="white"></rect>
<line x1="0" y1="80" x2="5760" y2="80" stroke="black" stroke-width="4"></line>
<line x1="0" y1="120" x2="5760" y2="120" stroke="black" stroke-width="4"></line>
<line x1="0" y1="160" x2="5760" y2="160" stroke="black" stroke-width="4"></line>
<line x1="0" y1="200" x2="5760" y2="200" stroke="black" stroke-width="4"></line>
<line x1="0" y1="240" x2="5760" y2="240" stroke="black" stroke-width="4"></line>
<use href="#gclef" x="20" y="0" width="100"/>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/434747.html
上一篇：如何使文本沿svg曲線居中
下一篇：如何從Struts2中的屬性檔案中獲取源路徑和替代文本值以插入影像？在Struts1中使用了altKey和srcKey