Блог

Я хочу сохранить ширину обводки svg, даже если родительский элемент масштабируется.

Я пробовал код, как показано ниже;

 <svg version="1.2" baseProfile="tiny" viewBox="-100 -100 200 200">
    <rect vector-effect="non-scaling-stroke" x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="red" stroke-width="2" fill="none"></rect>
</svg>
  

и вышеописанное отлично работает, но то, что я хочу сделать, похоже на приведенное ниже;

 <div style="-webkit-transform: scale(5,5);">
<svg version="1.2" baseProfile="tiny" viewBox="-100 -100 200 200">
    <rect vector-effect="non-scaling-stroke" x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="red" stroke-width="2" fill="none"></rect>
</svg>
</div>
  

Таким образом, если родительское погружение масштабируется на 5, выходные данные обводки также масштабируются на 5.
Я хочу сохранить ширину обводки прямоугольника до фиксированного размера 2, даже если родительский div масштабируется. Могу ли я получить помощь?