Свойство SVG vector-effect = "non-scaling-stroke" по-прежнему масштабирует ход - PullRequest
Новая
       40

Свойство SVG vector-effect = "non-scaling-stroke" по-прежнему масштабирует ход

0 голосов
/ 28 июня 2018

В SVG мне нужно, чтобы ширина хода PATH оставалась без изменений, пока свойство viewBox меняется. Свойство SVG vector-effect="non-scaling-stroke" должно выполнить это, но оно не работает так, как предполагалось.

Может кто-нибудь объяснить, почему в приведенном ниже коде (проверьте codepen.io ) ширина штриха по-прежнему увеличивается при изменении окна просмотра? Я также был бы признателен за решение, которое делает ширину штрихов постоянной независимо от области просмотра.

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

1 Ответ

0 голосов
/ 05 июля 2018

Это ошибка в Chrome. Отчет об ошибке здесь https://bugs.chromium.org/p/chromium/issues/detail?id=849080. Исправлено в версии Chrome 68.0.3440.25.

...