来自svg mask

Question

我正在使用SVG蒙版和渐变渲染一条线，类似于Github在查看和组织的存储库列表时显示their "year of activity" charts的迷你图线。

由于某些原因，当SVG的宽度为某个值时，行的顶部会出现一条水平线：

该行似乎对应于包含矩形的SVG组元素，该矩形应用了蒙版和渐变填充：

但是，将SVG调整为不同宽度会导致行不显示：

以下是SVG示例的标记：

body {
  background: #000;
}

<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
  		<stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url(&quot;#gradient-36&quot;); mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
</svg>

这是显示错误的实时代码的链接： https://bl.ocks.org/clhenrick/ed231b1ba92c87f82529c153e7c77a4e/4954afeeccc9b2d61547e08bb901a8ae23c32c83

以下是使用与无错误相同技术的示例的链接，只是SVG，mask，rect和不同大小路径的不同大小宽度： https://bl.ocks.org/clhenrick/e0b06bbb361780f818993e956dccc5d8/d1fcd24b4df5571ed7069f4a45ed9932a48d74c2

此外，有了错误的例子，当我将路径元素移出掩码并进入组元素时，路径看起来是正确的： https://bl.ocks.org/clhenrick/b1ac9490a5708afbcb3ef7f93bb45b3a/5df5bd70333da98d866e7f59e3dd74060ff87474

我不确定为什么会出现某些SVG宽度或SVG路径大小而不是其他大小。

Answer 1

我不确定是什么导致了这个问题，但这是一个避免它的工作。我们的想法是通过改变rect（它的y值）的位置来隐藏这一行。

所以这是有缺陷的SVG：

body {
background:black;
}

<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
  		<stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url(&quot;#gradient-36&quot;); mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
  </svg>

如果你将y从-2改为34，那么这条线就会消失：

body {
background:black;
}

<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
  		<stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="34" width="281" height="46" style="stroke: none; fill: url(&quot;#gradient-36&quot;); mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
  </svg>

这当然会影响您正在应用的填充，因为它是线性背景。因此，您可以根据需要更改颜色以调整颜色。

我做了更多测试，试图指出问题的原因。我试图消除SVG的某些部分（比如线性渐变）并改变一些值，这就是我得到的：

body {
  background: black;
}

svg {
  display: block;
}

<svg width="281" height="50">
  <defs>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
  </svg>
<svg width="281" height="50">
  
  <g transform="translate(0, 2)">
       <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
  </g>
  </svg>

<svg width="281" height="50">
  <defs>
    <mask id="mask-35" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="3" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url(&quot;#mask-35&quot;);">
    </rect>
   </g>
  </svg>

第一个是越野车，当我试图将路径直接添加到SVG时，它工作正常（第二个）。在第三个中，我改变了路径中的笔划值，使其成为3，线条消失了。

我可以断定这是因为您使用路径作为掩码。它可能是与某些浏览器相关的错误，而不是您的代码的错误。在这种情况下，您可以简单地考虑直接使用路径作为元素（并且您有很多可能使用渐变对其进行着色）或使用我的技巧来隐藏错误。

Answer 2

我不清楚为什么github会使用复杂的rects，mask和变换排列来制作迷你图。它似乎可能会触发Chrome中的错误。

您是否考虑过简化图表？只需单独使用迷你线路径，并将渐变直接应用于它？

＆＃13;

＆＃13;

body {
  background: #000;
}

＆＃13;

<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
  		<stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
  </defs>
  <path fill="none" stroke-width="2" stroke="url(#gradient-36)" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
  </path>
</svg>

＆＃13;

＆＃13;

＆＃13;