SVGファイルのさまざまな部分の縮尺が異なります

Question

鋸歯状のエッジを持つチケットには、可変高さのSVGグラフィックが必要です。上部および下部セグメントは、固定アスペクト比を維持したままサイズ調整を行い、中間セグメントはコンテナのサイズに合わせて伸ばす必要があります。

この画像は私がちょうど水平方向の代わりに垂直方向の希望のものをほとんどやってthis jsFiddleを見つけましたが、私は何が起こっているかを理解するためにビューボックスに十分精通していないよと

説明する必要がありますそれを私のニーズに適応させる。私はちょうど私のファイルを台無しにすることができた。

私のsvgファイルは現時点では非常に単純です。最上部の経路、最下部の経路、中央の矩形である。これは次のようになります。

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="464px" height="464px" viewBox="0 0 464 464" enable-background="new 0 0 464 464" xml:space="preserve"> 
    <path fill="#FFF100" d="M432.846,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839 
     c0.057,5.754-4.563,10.465-10.316,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.843 
     c0.058,5.754-4.561,10.465-10.315,10.522S339.021,5.96,338.965,0.206c0-0.069,0-0.137,0-0.206h-20.836 
     c0.057,5.754-4.562,10.465-10.316,10.522c-5.754,0.057-10.465-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.437 
     c0,24.772-20.082,44.853-44.854,44.853c-24.771,0-44.853-20.081-44.853-44.853H166.71c0.056,5.754-4.562,10.465-10.317,10.522 
     c-5.754,0.057-10.465-4.562-10.521-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839c0.098,5.754-4.486,10.498-10.24,10.596 
     c-5.754,0.099-10.498-4.486-10.596-10.24c-0.002-0.119-0.002-0.238,0-0.356H83.355c0.057,5.754-4.563,10.465-10.317,10.522 
     S62.573,5.96,62.517,0.206c0-0.069,0-0.137,0-0.206H41.677c0.057,5.754-4.562,10.465-10.316,10.522 
     C25.607,10.579,20.896,5.96,20.839,0.206c-0.001-0.069-0.001-0.137,0-0.206H0v56h464V0h-20.839 
     C443.219,5.754,438.6,10.465,432.846,10.522z"/> 
    <path fill="#FFF100" d="M432.846,453.478c-5.755-0.056-10.466,4.563-10.522,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839 
     c0.057-5.754-4.563-10.466-10.316-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.843 
     c0.058-5.754-4.561-10.466-10.315-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.836 
     c0.057-5.754-4.562-10.466-10.316-10.522c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.437 
     c0-24.771-20.082-44.854-44.854-44.854c-24.771,0-44.853,20.082-44.853,44.854H166.71c0.056-5.754-4.562-10.466-10.317-10.522 
     c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839c0.098-5.754-4.487-10.498-10.24-10.597 
     c-5.754-0.098-10.498,4.486-10.596,10.24c-0.002,0.119-0.002,0.238,0,0.356H83.355c0.057-5.754-4.563-10.466-10.317-10.522 
     c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205H41.677c0.057-5.754-4.562-10.466-10.316-10.522 
     c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205H0v-56h464v56h-20.839 
     C443.219,458.246,438.6,453.534,432.846,453.478z"/> 
    <rect y="56" fill="#00AEEF" width="464" height="352"/> 
</svg> 

誰かが私を助けてくれたら大変うれしいです。

Answer 1

一般に、SVGの一部を別のものと縮尺することはできません。しかし、簡単なケース（リンクしている鉛筆の画像のような）があります。そこでは、手間がかかり、動作するものを構築することができます。終わり、身体、そしてシャープエンド：その鉛筆は

仕組み

それは鉛筆の三つの部分ごとに<symbol>要素を定義することによって開始します。

次に、3つの子<svg>要素を追加してそれらを結合します。背部には本体<symbol>が全体の幅を広げた<svg>です。次に、2つのエンドキャップ<svg>要素が前面に配置されます。各エンドキャップ<svg>は幅の半分を占めます。しかし、それらにはそれぞれpreserveAspectRatio属性があり、その結果、それぞれ左右の端に揃えられます。

我々はほぼ完全に半透明の両端部を作る場合、あなたは何が起こっているのを見ることができます。

:checked~svg{ 
 
    width:500px; 
 
}

<input type="checkbox"/><br/> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <defs> 
 
\t \t <g id="source"> 
 
\t \t \t <rect width="200" height="100" fill="yellow"/> 
 
\t \t \t <circle cx="50" cy="50" r="40" fill="red"/> 
 
\t \t \t <rect x="50" y="10" width="100" height="80" fill="orange"/> 
 
\t \t \t <path d="M150,10L190,50 150,90z" fill="pink"/> 
 
\t \t </g> 
 
\t \t <symbol id="left" viewBox="0 0 50 100" preserveAspectRatio="none"> 
 
\t \t \t <use xlink:href="#source"/> 
 
\t \t </symbol> 
 
\t \t <symbol id="middle" viewBox="50 0 100 100" preserveAspectRatio="none"> 
 
\t \t \t <use xlink:href="#source"/> 
 
\t \t </symbol> 
 
\t \t <symbol id="right" viewBox="150 0 50 100" preserveAspectRatio="none"> 
 
\t \t \t <use xlink:href="#source"/> 
 
\t \t </symbol> 
 
\t </defs> 
 
\t <svg viewBox="0 0 1 1" preserveAspectRatio="none"> 
 
\t \t <use xlink:href="#middle" width="1" height="1"/> 
 
\t </svg> 
 
\t <svg viewBox="0 0 1 2" preserveAspectRatio="xMinYMid"> 
 
\t \t <use xlink:href="#left" width="1" height="2" opacity="0.1"/> 
 
\t </svg> 
 
\t <svg viewBox="0 0 1 2" preserveAspectRatio="xMaxYMid"> 
 
\t \t <use xlink:href="#right" width="1" height="2" opacity="0.2"/> 
 
\t </svg> 
 
</svg>

あなたは体が全幅に延伸され、どのようにされたかを見ることができます伸長された本体を隠すためにエンドキャップが端部に配置される。

このトリックは、鉛筆の背景が黄色であるためにのみ機能します。しかし、私はチケットの穿孔された端を透明にしたいと思うので、そのトリックはあなたのためには機能しません。あなたが白で大丈夫なら、それはそうです。

おそらくもっと簡単なのは、3つの部分を重ねて重ねるだけです。

<svg> (the top of the ticket) 
<div> (containing the ticket body contents) 
<svg> (the bottom of the ticket)