, yolun deformasyonunu engeller tarafından korunur preserveAspectRatio = "none"

Question

<path> öğelerinin <svg> etiketi üzerinde preserveAspectRatio="none" neden olduğu gerilimi önlemek istiyorum. Ben <path> elemanlarına bu özellik ekleyerek neredeyse mükemmel bir çözüm buldum:

vector-effect="non-scaling-stroke" 

Ama onları da devre dışı ya da daha doğrusu onların stroke-width sabittir ve ölçeklenebilir değil transform="scale()" ile ölçeklenebilir olması gerekir. Yani, sorum şu: Gerilmesini engellemek için herhangi bir yol var mı, yoksa yakınlaştırma değil mi?

Tamam, daha açık hale getirmek için: https://codepen.io/lukydorny/pen/aNYOdW

farklı viewBox genişlik ve yükseklik (2 Image) ile bir yol şekil istiyorum ama dikey (3 görüntüsü) ile aynı genişlikte olması, yatay bir çizgi mi . Ve sonra keşke son resimde görebildiğiniz gibi, orijinal yolla (4. resim) aynı şekilde ölçeklendirebildim.

Nasıl yapılacağı herhangi bir yolu var mı?

Answer 1

Evet, sadece böyle bir SVG öğesi tanımlayarak bunu başarabilirsiniz:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="100%" 
    height="100%" 
    viewBox="0 0 1920 1080" 
    style="display:block"> 

    ... your SVG paths code here 

</svg> 

Bildirimi "ViewBox" boyutu "svg belgenin" boyutu olmalıdır (maksimum x ve maksimum y değerleri) .

Bu, tanımladığınız en boy oranını korur; Ancak, oluşturduğunuz yollarınızın tanımladığınız boyuta uygun olduğunu, aksi halde sorunlara neden olabileceğini unutmayın.

Tüm grafiği "yakınlaştırmak" için, sadece SVG öğesinin veya ana öğesinin genişlik & yüksekliğini veya SVG'nin içindeki "scale()" harfini veya normalde olduğu gibi JavaScript'i kullanın.