Javascript 如何将svg宽度设置为100%，并剪裁在高度上创建的多余空白？
我有一个svg图像，我已经将宽度设置为100%，并将PreserveSpectratio设置为meet值。我喜欢宽度的行为。但是，在svg中绘制的最高点和最低点的上方和下方添加了一个巨大的空白。html/css或javascript是否有办法将宽度保持在100%的动态范围内，并在高度上剪裁多余的空白？ 谢谢 --克里斯托弗 [编辑]Javascript 如何将svg宽度设置为100%，并剪裁在高度上创建的多余空白？,javascript,html,css,svg,width,Javascript,Html,Css,Svg,Width,我有一个svg图像，我已经将宽度设置为100%，并将PreserveSpectratio设置为meet值。我喜欢宽度的行为。但是，在svg中绘制的最高点和最低点的上方和下方添加了一个巨大的空白。html/css或javascript是否有办法将宽度保持在100%的动态范围内，并在高度上剪裁多余的空白？ 谢谢 --克里斯托弗 [编辑] <svg version="1.1" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/sv
<svg version="1.1" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
xml:space="preserve" preserveAspectRatio="xMinYMid meet">
<path id="trebleclef" d="M18.343,26.511c0.08,0,0.179-0.02,0.259-0.02c3.088,0,5.101,2.55,5.101,5.2
c0,1.514-0.658,3.068-2.132,4.184c-0.438,0.339-0.936,0.558-1.455,0.717c0.06,0.697,0.1,1.395,0.1,2.092
c0,0.379-0.02,0.777-0.04,1.156c-0.139,2.391-1.793,4.543-4.144,4.543c-2.152,0-3.885-1.753-3.885-3.925
c0-1.156,1.056-2.052,2.232-2.052c1.076,0,1.893,0.936,1.893,2.052c0,1.036-0.857,1.893-1.893,1.893c-0.219,0-0.418-0.04-0.618-0.12
c0.518,0.777,1.355,1.295,2.331,1.295c1.913,0,3.128-1.833,3.248-3.806c0.02-0.359,0.04-0.737,0.04-1.096
c0-0.618-0.02-1.215-0.08-1.833c-0.578,0.1-1.156,0.159-1.773,0.159c-3.746,0-6.635-3.427-6.635-7.452
c0-3.527,2.61-6.097,4.941-8.787c-0.379-1.235-0.737-2.491-0.897-3.786c-0.12-1.036-0.139-2.072-0.139-3.108
c0-2.291,1.096-4.463,2.969-5.818c0.06-0.04,0.139-0.06,0.199-0.06c0.08,0,0.139,0,0.199,0.06c1.415,1.674,2.65,4.882,2.65,7.133
c0,2.849-1.714,5.081-3.587,7.253C17.646,23.742,18.004,25.136,18.343,26.511z M20.037,35.777c1.355-0.478,2.252-1.893,2.252-3.268
c0-1.793-1.315-3.567-3.447-3.786C19.32,31.034,19.758,33.326,20.037,35.777z M12.326,31.174c0,2.69,2.57,4.922,5.26,4.922
c0.558,0,1.096-0.04,1.634-0.12c-0.279-2.531-0.737-4.882-1.255-7.253c-1.574,0.159-2.471,1.215-2.471,2.371
c0,0.877,0.498,1.813,1.614,2.451c0.1,0.1,0.139,0.199,0.139,0.299c0,0.219-0.199,0.438-0.438,0.438c-0.06,0-0.12-0.02-0.179-0.04
c-1.594-0.857-2.331-2.291-2.331-3.686c0-1.753,1.156-3.467,3.188-3.925c-0.279-1.156-0.578-2.331-0.917-3.487
C14.438,25.555,12.326,27.986,12.326,31.174z M18.981,10.91c-1.973,0.956-3.228,2.969-3.228,5.161c0,1.474,0.359,2.65,0.717,3.866
c1.594-1.933,2.909-3.945,2.909-6.456C19.379,12.384,19.3,11.906,18.981,10.91z"/>
<g id="flats" class="flat">
<path id="flat1" class="flat" display="none" d="M29.431,26.241l-0.02,1.353v0.225c0,0.451,0.02,0.902,0.08,1.353
c0.901-0.779,1.863-1.64,1.863-2.849c0-0.676-0.28-1.373-0.861-1.373C29.872,24.95,29.451,25.565,29.431,26.241z M28.59,29.911
l-0.24-12.197c0.16-0.102,0.361-0.164,0.541-0.164s0.381,0.061,0.541,0.164l-0.14,7.072c0.501-0.43,1.162-0.697,1.823-0.697
c1.042,0,1.783,0.984,1.783,2.091c0,1.64-1.723,2.398-2.945,3.464c-0.3,0.266-0.481,0.779-0.901,0.779
C28.79,30.423,28.59,30.198,28.59,29.911z"/>
<path id="flat2" class="flat" display="none" d="M34.038,18.554l-0.02,1.353v0.225c0,0.451,0.02,0.902,0.08,1.353
c0.901-0.779,1.863-1.64,1.863-2.849c0-0.676-0.28-1.373-0.861-1.373C34.479,17.262,34.058,17.877,34.038,18.554z M33.197,22.223
l-0.24-12.197c0.16-0.102,0.361-0.164,0.541-0.164c0.18,0,0.381,0.061,0.541,0.164l-0.14,7.072c0.501-0.43,1.162-0.697,1.823-0.697
c1.042,0,1.783,0.984,1.783,2.091c0,1.64-1.723,2.398-2.945,3.464c-0.3,0.266-0.481,0.779-0.901,0.779
C33.397,22.736,33.197,22.51,33.197,22.223z"/>
<path id="flat3" class="flat" display="none" d="M38.646,28.804l-0.02,1.353v0.225c0,0.451,0.02,0.902,0.08,1.353
c0.901-0.779,1.863-1.64,1.863-2.849c0-0.676-0.28-1.373-0.861-1.373C39.087,27.512,38.666,28.127,38.646,28.804z M37.805,32.473
l-0.24-12.197c0.16-0.102,0.361-0.164,0.541-0.164s0.381,0.061,0.541,0.164l-0.14,7.072c0.501-0.43,1.162-0.697,1.823-0.697
c1.042,0,1.783,0.984,1.783,2.091c0,1.64-1.723,2.398-2.945,3.464c-0.3,0.266-0.481,0.779-0.901,0.779
C38.005,32.985,37.805,32.76,37.805,32.473z"/>
<path id="flat4" class="flat" display="none" d="M43.253,21.116l-0.02,1.353v0.225c0,0.451,0.02,0.902,0.08,1.353
c0.901-0.779,1.863-1.64,1.863-2.849c0-0.676-0.28-1.373-0.861-1.373C43.694,19.825,43.273,20.44,43.253,21.116z M42.412,24.786
l-0.24-12.197c0.16-0.102,0.361-0.164,0.541-0.164c0.18,0,0.381,0.061,0.541,0.164l-0.14,7.072c0.501-0.43,1.162-0.697,1.823-0.697
c1.042,0,1.783,0.984,1.783,2.091c0,1.64-1.723,2.398-2.945,3.464c-0.3,0.266-0.481,0.779-0.901,0.779
C42.612,25.298,42.412,25.073,42.412,24.786z"/>
<path id="flat5" class="flat" display="none" d="M47.861,31.366l-0.02,1.353v0.225c0,0.451,0.02,0.902,0.08,1.353
c0.901-0.779,1.863-1.64,1.863-2.849c0-0.676-0.28-1.373-0.861-1.373C48.302,30.075,47.881,30.69,47.861,31.366z M47.02,35.035
l-0.24-12.197c0.16-0.102,0.361-0.164,0.541-0.164c0.18,0,0.381,0.061,0.541,0.164l-0.14,7.072c0.501-0.43,1.162-0.697,1.823-0.697
c1.042,0,1.783,0.984,1.783,2.091c0,1.64-1.723,2.398-2.945,3.464c-0.3,0.266-0.481,0.779-0.901,0.779
C47.22,35.548,47.02,35.322,47.02,35.035z"/>
<path id="flat6" class="flat" display="none" d="M52.818,23.858l-0.02,1.353v0.225c0,0.451,0.02,0.902,0.08,1.353
c0.901-0.779,1.863-1.64,1.863-2.849c0-0.676-0.28-1.373-0.861-1.373C53.259,22.567,52.838,23.182,52.818,23.858z M51.977,27.527
l-0.24-12.197c0.16-0.102,0.361-0.164,0.541-0.164s0.381,0.061,0.541,0.164l-0.14,7.072c0.501-0.43,1.162-0.697,1.823-0.697
c1.042,0,1.783,0.984,1.783,2.091c0,1.64-1.723,2.398-2.945,3.464c-0.3,0.266-0.481,0.779-0.901,0.779
C52.177,28.04,51.977,27.814,51.977,27.527z"/>
</g>
<g id="sharps" class="sharp" display="none">
<path id="sharp1" class="sharp" display="none" d="M34.02,23.299c0,0.205-0.163,0.389-0.367,0.389c-0.204,0-0.387-0.184-0.387-0.389v-2.972
l-1.69,0.635v3.239c0,0.205-0.183,0.389-0.387,0.389s-0.367-0.184-0.367-0.389v-2.972l-0.652,0.246
c-0.041,0.021-0.102,0.021-0.143,0.021c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.328,0.265-0.389l0.937-0.328v-3.28
l-0.652,0.225c-0.041,0.021-0.102,0.021-0.143,0.021c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.307,0.265-0.369
l0.937-0.348v-3.239c0-0.205,0.163-0.389,0.367-0.389s0.387,0.184,0.387,0.389v2.972l1.69-0.635V9.605
c0-0.205,0.183-0.389,0.387-0.389c0.204,0,0.367,0.184,0.367,0.389v2.972l0.652-0.246c0.041-0.02,0.102-0.02,0.143-0.02
c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.328-0.265,0.389l-0.937,0.328v3.28l0.652-0.225
c0.041-0.021,0.102-0.021,0.143-0.021c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.307-0.265,0.369L34.02,20.06V23.299z
M31.576,15.571v3.28l1.69-0.615v-3.28L31.576,15.571z"/>
<path id="sharp2" class="sharp" display="none" d="M39.621,30.986c0,0.205-0.163,0.389-0.367,0.389s-0.387-0.184-0.387-0.389v-2.972l-1.69,0.635
v3.239c0,0.205-0.183,0.389-0.387,0.389c-0.204,0-0.367-0.184-0.367-0.389v-2.972l-0.652,0.246
c-0.041,0.021-0.102,0.021-0.143,0.021c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.328,0.265-0.389l0.937-0.328v-3.28
l-0.652,0.225c-0.041,0.02-0.102,0.02-0.143,0.02c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.307,0.265-0.369
l0.937-0.348v-3.239c0-0.205,0.163-0.389,0.367-0.389c0.204,0,0.387,0.184,0.387,0.389v2.972l1.69-0.635v-3.239
c0-0.205,0.183-0.389,0.387-0.389s0.367,0.184,0.367,0.389v2.972l0.652-0.246c0.041-0.02,0.102-0.02,0.143-0.02
c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.328-0.265,0.389l-0.937,0.328v3.28l0.652-0.225
c0.041-0.021,0.102-0.021,0.143-0.021c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.307-0.265,0.369l-0.937,0.348V30.986z
M37.177,23.258v3.28l1.69-0.615v-3.28L37.177,23.258z"/>
<path id="sharp3" class="sharp" display="none" d="M45.222,20.737c0,0.205-0.163,0.389-0.367,0.389c-0.204,0-0.387-0.184-0.387-0.389v-2.972
l-1.69,0.635v3.239c0,0.205-0.183,0.389-0.387,0.389c-0.204,0-0.367-0.184-0.367-0.389v-2.972l-0.652,0.246
c-0.041,0.021-0.102,0.021-0.143,0.021c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.328,0.265-0.389l0.937-0.328v-3.28
l-0.652,0.225c-0.041,0.02-0.102,0.02-0.143,0.02c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.307,0.265-0.369
l0.937-0.348V7.945c0-0.205,0.163-0.389,0.367-0.389c0.204,0,0.387,0.184,0.387,0.389v2.972l1.69-0.635V7.043
c0-0.205,0.183-0.389,0.387-0.389c0.204,0,0.367,0.184,0.367,0.389v2.972l0.652-0.246c0.041-0.02,0.102-0.02,0.143-0.02
c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.328-0.265,0.389l-0.937,0.328v3.28l0.652-0.225
c0.041-0.02,0.102-0.02,0.143-0.02c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.307-0.265,0.369l-0.937,0.348V20.737z
M42.778,13.008v3.28l1.69-0.615v-3.28L42.778,13.008z"/>
<path id="sharp4" class="sharp" display="none" d="M50.823,28.424c0,0.205-0.163,0.389-0.367,0.389c-0.204,0-0.387-0.184-0.387-0.389v-2.972
l-1.69,0.635v3.239c0,0.205-0.183,0.389-0.387,0.389c-0.204,0-0.367-0.184-0.367-0.389v-2.972l-0.652,0.246
c-0.041,0.021-0.102,0.021-0.143,0.021c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.328,0.265-0.389l0.937-0.328v-3.28
l-0.652,0.225c-0.041,0.02-0.102,0.02-0.143,0.02c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.307,0.265-0.369
l0.937-0.348v-3.239c0-0.205,0.163-0.389,0.367-0.389c0.204,0,0.387,0.184,0.387,0.389v2.972l1.69-0.635V14.73
c0-0.205,0.183-0.389,0.387-0.389c0.204,0,0.367,0.184,0.367,0.389v2.972l0.652-0.246c0.041-0.02,0.102-0.02,0.143-0.02
c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.328-0.265,0.389l-0.937,0.328v3.28l0.652-0.225
c0.041-0.021,0.102-0.021,0.143-0.021c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.307-0.265,0.369l-0.937,0.348V28.424z
M48.379,20.696v3.28l1.69-0.615v-3.28L48.379,20.696z"/>
<path id="sharp5" class="sharp" display="none" d="M56.424,36.111c0,0.205-0.163,0.389-0.367,0.389c-0.204,0-0.387-0.184-0.387-0.389v-2.972
l-1.69,0.635v3.239c0,0.205-0.183,0.389-0.387,0.389c-0.204,0-0.367-0.184-0.367-0.389v-2.972l-0.652,0.246
c-0.041,0.02-0.102,0.02-0.143,0.02c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.328,0.265-0.389l0.937-0.328v-3.28
l-0.652,0.225c-0.041,0.02-0.102,0.02-0.143,0.02c-0.224,0-0.407-0.184-0.407-0.41v-1.23c0-0.164,0.102-0.307,0.265-0.369
l0.937-0.348v-3.239c0-0.205,0.163-0.389,0.367-0.389c0.204,0,0.387,0.184,0.387,0.389v2.972l1.69-0.635v-3.239
c0-0.205,0.183-0.389,0.387-0.389c0.204,0,0.367,0.184,0.367,0.389v2.972l0.652-0.246c0.041-0.021,0.102-0.021,0.143-0.021
c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.328-0.265,0.389l-0.937,0.328v3.28l0.652-0.225
c0.041-0.02,0.102-0.02,0.143-0.02c0.224,0,0.407,0.184,0.407,0.41v1.23c0,0.164-0.102,0.307-0.265,0.369l-0.937,0.348V36.111z
M53.98,28.383v3.28l1.69-0.615v-3.28L53.98,28.383z"/>
</g>
<g id="Staff">
<line id="estaffline" fill="none" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="7.115" y1="36.713" x2="314.624" y2="36.713"/>
<line fill="none" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="7.115" y1="31.732" x2="314.624" y2="31.732"/>
<line fill="none" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="7.115" y1="26.75" x2="314.624" y2="26.75"/>
<line fill="none" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="7.115" y1="21.769" x2="314.624" y2="21.769"/>
<line id="fstaffline" fill="none" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="7.115" y1="16.788" x2="314.624" y2="16.788"/>
</g>
<use id="2ndStaff" xlink:href="#Staff" x="0" y="0" />
<g id="lateralshift">
<g id="ledgerlines">
<line id="MidCLine1" display="inline" fill="none" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" x1="48.09" y1="41.694" x2="57.924" y2="41.694"/>
<line id="MidCLine2" display="inline" fill="none" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" x1="48.09" y1="41.694" x2="57.924" y2="41.694"/>
</g>
<g id="allnotes">
<g id="note1">
<path id="Barline1" d="M55.837,19.278h0.249c0.11,0,0.199,0.089,0.199,0.199V40.56c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V19.478C55.638,19.368,55.727,19.278,55.837,19.278z"/>
<path class="root" d="M54.113,38.945c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C52.499,39.244,53.296,38.945,54.113,38.945z"/>
<path class="interval" d="M54.113,33.963c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C52.499,34.262,53.296,33.963,54.113,33.963z"/>
</g>
<g id="note2">
<path id="BarLine2" d="M70.852,16.788h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V16.987C70.653,16.877,70.742,16.788,70.852,16.788z"/>
<path class="root" d="M69.127,36.454c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C67.513,36.753,68.31,36.454,69.127,36.454z"/>
<path class="interval" d="M69.127,31.473c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C67.513,31.772,68.31,31.473,69.127,31.473z"/>
</g>
<g id="note3">
<path class="root" d="M84.142,33.963c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C82.528,34.262,83.326,33.963,84.142,33.963z"/>
<path class="interval" d="M84.142,28.982c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C82.528,29.281,83.326,28.982,84.142,28.982z"/>
<path id="BarLine3" d="M85.866,14.297h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V14.496C85.667,14.386,85.756,14.297,85.866,14.297z"/>
</g>
<g id="note4">
<path class="root" d="M99.157,31.473c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C97.543,31.772,98.34,31.473,99.157,31.473z"/>
<path class="interval" d="M99.157,26.491c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C97.543,26.79,98.34,26.491,99.157,26.491z"/>
<path id="BarLine4" d="M100.882,11.806h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V12.006C100.682,11.896,100.772,11.806,100.882,11.806z"/>
</g>
<g id="note5">
<path class="root" d="M120.78,28.982c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C119.166,29.281,119.963,28.982,120.78,28.982z"/>
<path class="interval" d="M120.78,24.001c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C119.166,24.3,119.963,24.001,120.78,24.001z"/>
<path id="BarLine5" d="M122.505,10.146h0.249c0.11,0,0.199,0.089,0.199,0.199v20.252c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V10.345C122.305,10.235,122.395,10.146,122.505,10.146z"/>
</g>
<g id="note6">
<path id="BarLine6" d="M132.41,25.195h0.249c0.11,0,0.199,0.089,0.199,0.199v19.422c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V25.394C132.211,25.284,132.3,25.195,132.41,25.195z"/>
<path class="interval" d="M136.595,21.51c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C134.981,21.809,135.778,21.51,136.595,21.51z"/>
<path class="root" d="M136.595,26.491c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C134.981,26.79,135.778,26.491,136.595,26.491z"/>
</g>
<g id="note7">
<path class="root" d="M151.61,24.001c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C149.996,24.3,150.793,24.001,151.61,24.001z"/>
<path class="interval" d="M151.61,19.019c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C149.996,19.318,150.793,19.019,151.61,19.019z"/>
<path id="BarLine7" d="M147.426,22.705h0.249c0.11,0,0.199,0.089,0.199,0.199v20.252c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V22.904C147.226,22.794,147.316,22.705,147.426,22.705z"/>
</g>
<g id="note8">
<path id="BarLine8" d="M162.44,20.214h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V20.413C162.241,20.303,162.33,20.214,162.44,20.214z"/>
<path class="root" d="M166.625,21.51c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C165.011,21.809,165.808,21.51,166.625,21.51z"/>
<path class="interval" d="M166.625,16.529c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C165.011,16.828,165.808,16.529,166.625,16.529z"/>
</g>
<g id="note9">
<path class="root" d="M186.833,21.51c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C185.219,21.809,186.016,21.51,186.833,21.51z"/>
<path class="interval" d="M186.833,16.529c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C185.219,16.828,186.016,16.529,186.833,16.529z"/>
<path id="BarLine9" d="M182.649,20.214h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V20.413C182.45,20.303,182.539,20.214,182.649,20.214z"/>
</g>
<g id="note10">
<path class="root" d="M201.848,24.001c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C200.234,24.3,201.031,24.001,201.848,24.001z"/>
<path class="interval" d="M201.848,19.019c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C200.234,19.318,201.031,19.019,201.848,19.019z"/>
<path id="BarLine10" d="M197.664,22.705h0.249c0.11,0,0.199,0.089,0.199,0.199v20.252c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V22.904C197.464,22.794,197.554,22.705,197.664,22.705z"/>
</g>
<g id="note11">
<path class="root" d="M216.863,26.491c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C215.249,26.79,216.046,26.491,216.863,26.491z"/>
<path class="interval" d="M216.863,21.51c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C215.249,21.809,216.046,21.51,216.863,21.51z"/>
<path id="BarLine11" d="M212.678,25.195h0.249c0.11,0,0.199,0.089,0.199,0.199v19.422c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V25.394C212.479,25.284,212.568,25.195,212.678,25.195z"/>
</g>
<g id="note12">
<path class="root" d="M231.077,28.982c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C229.463,29.281,230.26,28.982,231.077,28.982z"/>
<path class="interval" d="M231.077,24.001c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C229.463,24.3,230.26,24.001,231.077,24.001z"/>
<path id="BarLine12" d="M232.802,10.146h0.249c0.11,0,0.199,0.089,0.199,0.199v20.252c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V10.345C232.603,10.235,232.692,10.146,232.802,10.146z"/>
</g>
<g id="note13">
<path class="root" d="M252.522,31.473c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C250.909,31.772,251.706,31.473,252.522,31.473z"/>
<path class="interval" d="M252.522,26.491c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C250.909,26.79,251.706,26.491,252.522,26.491z"/>
<path id="BarLine13" d="M254.247,11.806h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V12.006C254.048,11.896,254.137,11.806,254.247,11.806z"/>
</g>
<g id="note14">
<path id="BarLine14" d="M269.262,14.297h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V14.496C269.062,14.386,269.152,14.297,269.262,14.297z"/>
<path class="root" d="M267.538,33.963c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C265.924,34.262,266.721,33.963,267.538,33.963z"/>
<path class="interval" d="M267.538,28.982c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C265.924,29.281,266.721,28.982,267.538,28.982z"/>
</g>
<g id="note15">
<path id="BarLine15" d="M284.277,16.788h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V16.987C284.078,16.877,284.167,16.788,284.277,16.788z"/>
<path class="root" d="M282.552,36.454c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C280.938,36.753,281.735,36.454,282.552,36.454z"/>
<path class="interval" d="M282.552,31.473c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C280.938,31.772,281.735,31.473,282.552,31.473z"/>
</g>
<g id="note16">
<path class="root" d="M297.567,38.945c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C295.953,39.244,296.75,38.945,297.567,38.945z"/>
<path class="interval" d="M297.567,33.963c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717
c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C295.953,34.262,296.75,33.963,297.567,33.963z"/>
<path id="BarLine16" d="M299.292,19.278h0.249c0.11,0,0.199,0.089,0.199,0.199V40.56c0,0.11-0.089,0.199-0.199,0.199h-0.249
c-0.11,0-0.199-0.089-0.199-0.199V19.478C299.092,19.368,299.182,19.278,299.292,19.278z"/>
</g>
</g>
<rect x="309.444" y="16.788" width="0.946" height="19.925"/>
<rect x="311.884" y="16.788" width="2.989" height="19.925"/>
<rect x="176.077" y="16.788" width="0.946" height="19.925"/>
<rect x="110.967" y="16.788" width="0.946" height="19.925"/>
<rect x="242.709" y="16.788" width="0.946" height="19.925"/>
<g id="timesignature">
<path d="M35.838,20.633c0.438-0.279,0.877-0.578,1.196-0.996c0.219-0.299,0.379-0.658,0.538-0.996c0.04-0.08,0.1-0.12,0.179-0.12
c0.12,0,0.259,0.1,0.259,0.279v4.882h1.435c0.199,0,0.299,0.139,0.299,0.279s-0.1,0.299-0.299,0.299H38.01v0.159
c0,0.956,0.538,1.873,1.435,1.873c0.159,0,0.239,0.1,0.239,0.219c0,0.12-0.08,0.239-0.239,0.239c-0.877,0-1.734-0.259-2.61-0.259
c-0.877,0-1.734,0.259-2.61,0.259c-0.159,0-0.239-0.12-0.239-0.239c0-0.12,0.08-0.219,0.239-0.219
c0.897,0,1.455-0.917,1.455-1.873V24.26h-3.328c-0.458,0-0.618-0.279-0.618-0.458c0-0.06,0.02-0.1,0.04-0.12
c1.594-1.853,2.75-4.125,2.75-6.575c0-0.179,0.12-0.319,0.259-0.319h0.06c0.458,0.139,0.936,0.259,1.415,0.259
s0.956-0.12,1.415-0.259c0.04-0.02,0.06-0.02,0.1-0.02c0.219,0,0.359,0.199,0.239,0.339l-5.659,6.575h3.328v-2.61
C35.678,20.912,35.698,20.733,35.838,20.633z"/>
<path d="M35.838,30.668c0.438-0.279,0.877-0.578,1.196-0.996c0.219-0.299,0.379-0.658,0.538-0.996c0.04-0.08,0.1-0.12,0.179-0.12
c0.12,0,0.259,0.1,0.259,0.279v4.882h1.435c0.199,0,0.299,0.139,0.299,0.279s-0.1,0.299-0.299,0.299H38.01v0.159
c0,0.956,0.538,1.873,1.435,1.873c0.159,0,0.239,0.1,0.239,0.219s-0.08,0.239-0.239,0.239c-0.877,0-1.734-0.259-2.61-0.259
c-0.877,0-1.734,0.259-2.61,0.259c-0.159,0-0.239-0.12-0.239-0.239s0.08-0.219,0.239-0.219c0.897,0,1.455-0.917,1.455-1.873
v-0.159h-3.328c-0.458,0-0.618-0.279-0.618-0.458c0-0.06,0.02-0.1,0.04-0.12c1.594-1.853,2.75-4.125,2.75-6.575
c0-0.179,0.12-0.319,0.259-0.319h0.06c0.458,0.139,0.936,0.259,1.415,0.259s0.956-0.12,1.415-0.259c0.04-0.02,0.06-0.02,0.1-0.02
c0.219,0,0.359,0.199,0.239,0.339l-5.659,6.575h3.328v-2.61C35.678,30.947,35.698,30.767,35.838,30.668z"/>
</g>
</g>
<svg id=Wrapper />
</svg>
</br><a onclick='changekey("ex1-3rds-quarter-s","down");'>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="20.641px" height="22.713px" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#44612B" points="18.27,1.532 1,11.505 18.27,21.478 "/>
</svg></a>
<span id="majorkey" data-shift="0" title="0" data-key="C">C</span>
<a onclick='changekey("ex1-3rds-quarter-s","up");'>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="20.641px" height="22.713px" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#324DCE" points="1.913,21.478 19.183,11.505 1.913,1.532 "/>
</svg></a>
这对我来说很有用
<body onload="setSVGheight()" onresize="setSVGheight()">
function setSVGheight(){
var svgId = document.getElementsByTagName("svg")[0].id;
var svgtop = document.getElementById("fulldrawing").getBoundingClientRect().top;
var svgbottom = document.getElementById("fulldrawing").getBoundingClientRect().bottom;
var svgheight = ((svgbottom-svgtop)*1.5).toFixed(3);
document.getElementById("debug").innerHTML="svg Id: "+svgId+"</br>svg height: "+svgheight;
document.getElementById(svgId).style.height=svgheight;
函数setSVGheight（）{
var svgId=document.getElementsByTagName（“svg”）[0].id；
var svgtop=document.getElementById（“fulldrawing”）.getBoundingClientRect（）.top；
var svgbottom=document.getElementById（“fulldrawing”）.getBoundingClientRect（）.bottom；
var svgheight=（（svgbottom svgtop）*1.5）。toFixed（3）；
document.getElementById（“调试”）.innerHTML=“svg Id:+svgId+”svg高度：+SVGHight；
document.getElementById（svgId）.style.height=svghight；
}
根据需要，可以将高度量更改为更高或更低。我将高度设置为总绘图面积的1.5倍。元素“fuldrawing”是一个svg g元素，它包围在svg中的所有元素周围。包括代码或两者！好啊编辑原始帖子以包含项目链接。不好。将代码张贴在stackoverflow上。用小提琴读“是的”，现在我们可以看到你在说什么了。丢失dropbox链接。