レスポンシブSVGで細い枠線を伸ばさないようにする

JSがない可能性があるが、斜めの枠線が幅で伸びないレスポンシブSVGを生成する方法はありますか？ CSSだけでは不可能な複雑なマスクを作成する必要があるので、「CSSを使用する」と返信しないでください。レスポンシブSVGで細い枠線を伸ばさないようにする

body {padding: 20px}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head></head> 
 
<body> 
 
\t <svg preserveAspectRatio="none" width="100%" height="60" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350.47 32.42"> 
 
\t <defs><style>.cls-1{fill:#fff;stroke:#231f20;stroke-miterlimit:10;}</style></defs> 
 
\t <title>test</title> 
 
\t <polygon class="cls-1" points="0.93 31.91 21.34 0.5 333.39 0.5 349.62 31.91 0.93 31.91"/> 
 
\t </svg> 
 
</body> 
 
</html>

出典

2016-04-13 Microcipcip

短い答えはいいえです。特定の状況 - たとえば、[この質問]にリンクされている "鉛筆"の例（http://stackoverflow.com/questions/35524865/scale-different-parts-of-svg-file-differently）で、それをぶつけることができます。それ以外の場合は、左右の端を表す2つのSVGを作成するなどの処理を行う必要があります。そして、伸縮性のある中間部分を形成する3分の1。 –

変更preserveAspectRatio"xMaxYMax"に伸びないようにするとheight"100%"に大画面のために必要であれば、長方形が成長させ

body {padding: 20px}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head></head> 
 
<body> 
 
\t <svg preserveAspectRatio="xMaxYMax" width="100%" height="100%" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350.47 32.42"> 
 
\t <defs><style>.cls-1{fill:#fff;stroke:#231f20;stroke-miterlimit:10;}</style></defs> 
 
\t <title>test</title> 
 
\t <polygon class="cls-1" points="0.93 31.91 21.34 0.5 333.39 0.5 349.62 31.91 0.93 31.91"/> 
 
\t </svg> 
 
</body> 
 
</html>

出典

2016-04-13 12:17:01 Giuseppe

ありがとう、残念ながら私は同じままにするための高さが必要です、私はデスクトップ/モバイルの両方で特定のサイズでなければならない内部のテキストがあります。 – Microcipcip

レスポンシブSVGで細い枠線を伸ばさないようにする

答えて

関連する問題