SVG-атрибут не работает

Question

Я ожидаю закругленные углы в верхней, правой, нижней и левой точках ниже многоугольника. Кажется, он ничего не делает для атрибута stroke-linejoin

#container {
  display: block;
  width: 600px;
  height: 400px;
}

.poly {
  fill: #4d4d4d;
  stroke-linejoin: round;
  stroke-width: 5px;
  stroke: #19f6e8;
}

<div id="container">
    <svg width="100%" height="100%">
        <svg width="50%" height="50%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon class="poly" points="0,50 50,0 100,50 50,100" />
        </svg>
    </svg>
</div>

html css svg

0

s1n7ax 22 Окт 2019 в 19:36

Answer 1

Ваши внешние углы фактически закруглены, но контур находится за пределами вашего поля просмотра (потому что он распределяется равномерно по обе стороны от фактической линии многоугольника) и поэтому обрезается. Если вы переместите точки на 10 единиц от границ области просмотра, вы увидите округление (и увеличение stroke-width помогает увидеть его еще лучше).

document.querySelector('#toggle').addEventListener('click', () => {
  var polyEl = document.querySelector('polygon.poly');
  polyEl.classList.toggle('round');
});

#container {
  display: block;
  width: 600px;
  height: 400px;
}

.poly {
  fill: #4d4d4d;
  stroke-width: 15px;
  stroke: #19f6e8;
}

.poly.round {
  stroke-linejoin: round;
}

<button id="toggle">toggle stroke-linejoin</button>
<div id="container">
  <svg width="80%" height="80%">
        <svg width="50%" height="50%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon class="poly round" points="10,50 50,10 90,50 50,90" />
        </svg>
  </svg>
</div>

1

Constantin Groß 22 Окт 2019 в 16:44

Answer 2

Ваш рисунок выходит за пределы холста. Посмотрите, что произойдет, когда вы сделаете viewBox больше ...

Штрихи нарисованы наполовину внутри линии и наполовину снаружи.

#container {
  display: block;
  width: 600px;
  height: 400px;
}

.poly {
  fill: #4d4d4d;
  stroke-linejoin: round;
  stroke-width: 5px;
  stroke: #19f6e8;
}

<div id="container">
    <svg width="100%" height="100%">
        <svg width="50%" height="50%" viewBox="-5 -5 110 110" preserveAspectRatio="none">
            <polygon class="poly" points="0,50 50,0 100,50 50,100" />
        </svg>
    </svg>
</div>

2

Robert Longson 22 Окт 2019 в 16:44

SVG-атрибут не работает

2 ответа

Новые вопросы

html