SVG形式の図面。 パート1-標準ドラフト

インターネットでは、SVG形式での図面の作成に関するさまざまな情報を見つけることができます。 多くの場合、DXF形式からSVGへの何らかのエディターおよびエクスポートが提供されます。 SVGコードを見ると、多くの余分なものがあることがすぐにわかります。 あるエディターで作成されたSVGファイルは、別のエディターで常に正しく開くとは限りません。 ブラウザーがSVG形式をサポートし始めたことは良いことです。 どこでもSVGを使用することの欠点について書いています。 または、図面を表示するためのファイル構造の統一規則を遵守する必要がありますか？



実験とテストから、図面を作成するときに次のルールになりました。

-図面のオブジェクトモデルの使用。

-1つの測定単位（デフォルトはピクセル単位）のみを使用します。

-条件付きで受け入れる-1ピクセルは1ミリメートルに相当します（ブラウザーの場合はピクセル単位、私たちの場合はmm単位）。

-要素の説明の尺度は常に1：1です。

-オブジェクトを異なるスケールで表示するには、埋め込みsvg図面を使用します。

-固有のオブジェクトの場合、特性クラスにID aを設定します。

-...



図面のオブジェクトモデル。

簡略化された図面は、XML構造として記述できます。

<svg id="Detail1" ...> <defs id="defsCAD"> ... </defs> <svg id="Shtamp" ... > ... </svg> <svg id="View1" ... > <line class="atr1" ... /> <line class="atr1" ... /> <circle class="atr1" ... /> <path class="atr1" ... /> <rect class="atr1" ... /> <line class="atr2" ... /> <line class="atr2" ... /> <g class="dimL"> <line class="atr2" ... /> <line class="atr2" ... /> <line class="atr2" ... /> <text ... >...</text> </g> ... </svg> <svg id="View2" ... > <line class="atr1" ... /> ... </svg> <svg id="View3" ... > ... </svg> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

< svg >-タグは、図面自体と組み込みビュー、スタンプ、技術要件を記述するために使用されます。 1以外のスケールを使用する必要がある場合は、タグプロパティを使用して実装されます。

たとえば、1：4スケール：

 <svg id="View1" x="50" y="7" width="150" height="162" viewBox="-25 -200 600 648">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

width = " 150 " height = " 162 " viewBox = "....... 600 648 "-値の比率は、シートにビューを表示するためのスケールを設定します。



たとえば、10のスケール：1：

 <svg id="View1" x="50" y="7" width="150" height="162" viewBox="-0.6 -5 15 16.2">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

< defs >-ここでは、すべてのプリミティブな繰り返し要素について説明します。 Marker要素のSVGを使用すると、1つの特異性に気付きました。< svg >タグのスケールパラメーターは作用しないため、スケールの操作が大幅に簡素化されます。 （ビューが描画されなかった縮尺で、サイズの矢印は同じである必要があります）。 ただし、Marker要素の行では、 vector-effectプロパティのパラメーターは適用されません。非スケーリングストローク。 。



< line class = "atr1" ... />-CSSファイルで、グラフィックプリミティブのラインスタイルを記述します。 Internet Explorerで各スケールの独自のラインスタイル（ラインの太さとドット間隔）を指定する必要があるのは残念です。 原則として、すべての可能な縮尺が図面で同時に使用されるわけではなく、使用する縮尺のみを設定するだけで十分です。

線、円、パス、四角形などの要素の線スタイルの説明の例：

 line, rect, circle, ellipse, path, text { vector-effect: non-scaling-stroke; } /*  */ .lt1 { fill: none; stroke: blue; stroke-width: 2; } /*  */ .lt2 { fill: none; stroke: black; stroke-width: .7; } /*  */ .lt3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4; } /*  */ .lt4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4; } /*    0.25 */ .lt1_025 { fill: none; stroke: blue; stroke-width: 8; } /*    0.25 */ .lt2_025 { stroke: black; stroke-width: 2.8; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

< g class = "dimL"> ... </ g >-オブジェクトをグループサイズとして記述する要素。

例：

 ... <defs id="defsCAD"> <!--     - DimPoint --> <marker id="DimPoint1" viewBox="-2 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/> </marker> <marker id="DimPoint2" viewBox="-27 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0"/> </marker> </defs> ... <g class="DimL"> <line class="lt2" x1="190" y1="180" x2="190" y2="230"/> <line class="lt2" x1="310" y1="180" x2="310" y2="230"/> <line id="dim1" class="lt2" x1="190" y1="230" x2="310" y2="230" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/> <text x="265" y="222" font-size="28" text-anchor="middle">120</text> </g> ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

SVGでグラフィックを表示する機能が1つあります。 領域を設定し、エッジに沿って輪郭を描きたい場合、線の太さの半分を後退させる必要があります。そうしないと、線は半分になります。 たとえば、図面の端にある黒いフレームのコード。

 <svg id="Shtamp" type="1" x="0" y="0" width="420" height="297" viewBox="0 0 420 297"> ... <rect class="lt2" x="1" y="1" width="418" height="295"/> .... </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

外部CSSファイルを使用したデモ描画



ダウンロード用の拡張子が.svgの図面ファイル 。 CSSスタイルは図面ファイルにあります。



記事の更新バージョン



SVG形式の図面。 パート2-標準ドラフト