Question

在SVG中，我需要PATH笔触宽度在viewBox属性更改时保持不变。 SVG属性vector-effect="non-scaling-stroke"应该可以完成此任务，但是它不能像预期的那样工作。

有人可以解释为什么在下面的代码中（选中codepen.io），随着视图框的更改，笔划宽度仍会增加吗？我还要感谢一个解决方案，无论视图框如何，它都能使笔触宽度保持不变。

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()

Answer 1

这是Chrome中的错误。错误报告在此处https://bugs.chromium.org/p/chromium/issues/detail?id=849080。它已在Chrome版本68.0.3440.25中修复。

SVG属性vector-effect =“ non-scaling-stroke”仍可缩放笔划

1 个答案: