logo标签列表

SVG属性vector-effect="non-scaling-stroke"仍然会缩放描边。

htmlsvgimage-scaling
4
在SVG中，当viewBox属性改变时，我需要PATH描边宽度保持不变。SVG属性vector-effect="non-scaling-stroke"应该可以实现这一点，但它并没有按照预期工作。
能否有人解释一下为什么在下面的代码中（请查看codepen.io），随着viewbox的变化，描边宽度仍然会增加？我也希望有一个解决方案，使描边宽度始终保持不变，而不受viewbox的影响。

https://codepen.io/anon/pen/eKQrYL

HTML

<div class="Item">
  <div class="Item-graphic">
    <svg id='scaling-stroke' width="200" height="200" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2"/>
      <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
      <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </div>
  <span>
    50 x 50 view box<br>
    200 x 200 dimensions<br>
    no vector effect
  </span>
</div>
<div class="Item">
  <div class="Item-graphic">
    <svg id='non-scaling-stroke' width="200" height="200" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2" vector-effect="non-scaling-stroke"/>
      <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
      <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
    </div>
  </svg>
  <span>
    50 x 50 view box<br>
    200 x 200 dimensions<br>
    vector effect
  </span>
</div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #2196F3;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

svg {
  display: block;
  margin: 0 auto;
}

.Item {
  flex: 0 0 200px;
  padding: 0 1rem;
  color: rgba(#fff, 0.6);
  font-size: 11px;
  text-align: center;
}

.Item-graphic {
  display: flex;
  align-items: center;
  height: 220px;
}

JS 

n=1;inc=1;
cvb = function(){
  vb = '' + n
  vb += ' ' + n
  vb += ' ' + 2*(25-n)
  vb += ' ' + 2*(25-n)
  $('#non-scaling-stroke').attr('viewBox', vb)
  $('#scaling-stroke').attr('viewBox', vb)
  n += inc;
  if (n<=1 || n>=24) inc *= -1;
  setTimeout(cvb, 100);
}; 
cvb()
很可能是Chrome的bug。在Firefox上没有出现过这种情况。 - Robert Longson
你说得对。它在FireFox和Safari上运行正常。Chrome似乎有一个bug，而Microsoft Edge似乎甚至不支持非缩放描边。 - Fahad Alrashed
1个回答
4
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接