如何在SVG路径内部仅对齐描边?

6

SVG有没有任何选项可以将 stroke 放到元素的内部

#html-cup {
  stroke: #f00;
  stroke-opacity: 0.5;
  stroke-width: 4px;
  fill: #666666;
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg viewBox="0 0 245 123" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M66.84,122.57 C50.67,122.59 34.5,122.57 18.34,122.59 C12.72,89.4 7.15,56.2 1.53,23.01 C28.9,23 56.26,22.98 83.63,23.02 C83.63,23.02 72.5,89.4 66.84,122.57 Z M23.1,52.01 C36.09,51.99 49.09,52 62.08,52 C60.94,65.26 59.68,78.51 58.54,91.78 C53.32,93.17 48.19,94.97 42.88,96.02 C37.33,95.22 32.05,93.15 26.62,91.77 C25.52,78.51 24.28,65.26 23.1,52.01 Z M30.14,60.03 C38.44,59.97 46.75,60.01 55.06,60 C54.92,61.66 54.77,63.33 54.62,65 L35.77,65 C35.93,66.58 36.07,68.15 36.22,69.73 C42.22,69.77 48.21,69.75 54.21,69.75 C53.78,74.94 53.27,80.12 52.74,85.3 C49.43,86.12 46.21,87.3 42.84,87.84 C39.26,87.46 35.86,86.1 32.39,85.19 C32.16,82.46 31.95,79.72 31.73,76.99 C33.43,77 35.14,77.01 36.84,77.03 C36.96,78.42 37.07,79.82 37.19,81.21 C40.68,82.52 44.37,82.52 47.91,81.39 C48.13,79.26 48.33,77.13 48.55,75 C42.87,75 37.19,75.01 31.51,74.99 C31.01,70 30.59,65.01 30.14,60.03 Z M52.511235,44.83526 C52.5123089,42.8596197 52.52,41 52.52,41 L54.75,41 L54.75,43.2271118 L54.75,45.965769 C55.3578145,45.972676 57.2375163,45.9831949 57.2375163,45.9831949 C57.2375163,45.9831949 57.9778145,45.985769 58.25,45.985769 C58.23,46.725769 58.2499999,48.1957688 58.2499999,48.1957688 C58.2499999,48.1957688 55.6972973,48.195769 53.7301025,48.195769 L52.52,48.195769 C52.5124025,47.2992642 52.5105772,46.0454936 52.511235,44.83526 Z M45.0349255,41 L47.01,43.6621647 L48.9949341,41 L51.0200005,41 C51.0200005,41 51.016932,47.4818916 51.0200005,48.2245641 C50.4613935,48.2062043 48.9949341,48.2245641 48.9949341,48.2245641 L48.9949341,44.6168721 C48.9949341,44.6168721 47.4588808,46.4909331 47.0100002,47.0509057 C46.5212191,46.4358539 45.0349255,44.6168721 45.0349255,44.6168721 C45.0349255,44.6168721 45.0548757,47.3157561 45.0349255,48.2245641 L43,48.2245641 C43.008857,46.080879 43,41 43,41 L45.0349255,41 Z M39.1482782,41.0148674 C39.6855205,41.0137978 40.3552118,41.0142539 41.220459,41.0178052 C41.2179565,41.8484326 41.2179565,43.28 41.2179565,43.28 C41.2179565,43.28 39.268809,43.2799999 39.1999998,43.2799999 C39.1899998,44.7199999 39.23,46.83 39.2,48.28 C38.65,48.29 39.1999998,48.2800002 37,48.2800002 L37,43.33 C36.7652074,43.3253041 36.4201598,43.3184032 36.0684053,43.3103326 C35.6710848,43.3012166 35,43.28 35,43.28 L35,41 C36.9693426,41.0480327 36.9919583,41.0191607 39.1482782,41.0148674 Z M28.75,40.99 C28.75,41.2714527 28.7480041,41.6786445 28.7457957,42.0983357 C28.7430609,42.6180758 28.74,43.1569852 28.74,43.5 L31.26,43.5 C31.26,43.2967853 31.2589257,43.0248153 31.2574813,42.7291611 C31.254519,42.1227861 31.25,41.4167853 31.25,41 L33.51,41 C33.5,43.4 33.51,45.84 33.51,48.24 C32.96,48.25 31.8499999,48.22 31.2999999,48.24 C31.2699999,47.61 31.3199999,46.3700002 31.2999999,45.7500002 L30.708252,45.7500002 L28.71,45.7500002 C28.69,46.3700002 28.73,47.62 28.71,48.24 C28.16,48.23 27.3096924,48.24 26.49,48.24 C26.49,45.84 26.5,43.4 26.49,41 C27.06,41 28.18,41 28.75,40.99 Z"
    id="html-cup"></path>
    <path d="M73.905,0.211380899 L76.155,10.7813809 L83.5892007,10.7013808 L85.865,18.5013809 L0.135,18.4613809 L2.73507334,10.7013808 L9.995,10.7013809 C9.995,10.7013809 11.605,3.6413809 12.425,0.121380899 L73.905,0.211380899 L73.905,0.211380899 Z" id="html-top"
    fill="#666666"></path>
  </g>
</svg>


1
不,这是SVG 2的一个拟议功能,但由于图形库不支持它,很可能会被删除。您可以使用clipPath将元素包围起来,clipPath就是元素本身。 - Robert Longson
1
可能是Can you control how an SVG's stroke-width is drawn?的重复。 - JayKandari
@JayKandari 不是的,实际上我只需要SVG内部的描边。 - Mo.
1个回答

2

警告:与SVG元素对齐已被弃用。

您无法对齐描边。默认情况下,描边从中间对齐。

以前可以这样做,但现在已被弃用。

stroke-alignment="inner";

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接