SVG 格式绘图。第一部分 - 草案标准
4.80/5 (4投票s)
在互联网上可以找到很多关于创建 SVG 格式绘图的信息。通常使用编辑器打开 DXF 并导出为 SVG。查看 SVG 代码可以立即发现存在大量冗余。在一个编辑器中创建的 SVG 文件可能不总是在另一个编辑器中正确渲染。
在互联网上可以找到很多关于创建 SVG 格式绘图的信息。通常使用编辑器打开 DXF 并导出为 SVG。查看 SVG 代码可以立即发现存在大量冗余。在一个编辑器中创建的 SVG 文件可能不总是在另一个编辑器中正确渲染。很高兴浏览器开始支持 SVG 格式。到处都在写关于使用 SVG 的缺点。也许有必要遵守文件的通用规则来显示绘图？
从实验和测试中得出了创建绘图的这些规则
- 使用绘图的对象模型；
- 仅使用一个单位（默认像素）；
- 有条件地接受 - 一个像素等于一毫米（浏览器以像素为单位，而我们以毫米为单位）；
- 元素的比例描述始终为 1:1；
- 要以不同的比例显示对象，请使用嵌套的 svg 绘图；
- 对于唯一的对象 ID，请请求典型的类；
- ...
对象模型绘图。
简化的绘图可以描述为 XML 结构。
<svg id="Detail1" ...>
<defs id="defsCAD"> ... </defs>
<svg id="Shtamp" name="Frame drawing" ... >
...
</svg>
<svg id="View1" ... >
<g id="layer-0" name="System layer" ...>
<line class="line-type-1" ... />
<line class="line-type-1" ... />
<circle class="line-type-1" ... />
<path class="line-type-1" ... />
<rect class="line-type-1" ... />
<line class="line-type-2" ... />
<line class="line-type-2" ... />
<g class="dimL">
<line class="line-type-2" ... />
<line class="line-type-2" ... />
<line class="line-type-2" ... />
<text ... >...</text>
</g>
...
</g>
<g id="layer-1" name="Layer 1" ...>
...
</g>
</svg>
<svg id="View2" ... >
<line class="line-type-1" ... />
...
</svg>
<svg id="View3" ... > ... </svg>
</svg><svg> - 标签用于描述绘图本身、内置形状、框架绘图和技术要求。 如果要使用与 1: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> - 在此处描述所有重复的基本元素。 使用 SVG 元素 Marker 时会看到一个特性 - 它不应用标签 <svg> 的缩放，这使得使用比例更容易。（在任何比例下，箭头的大小必须相同）。 但行项目标记不受属性 vector-effect: non-scaling-stroke; 的影响。
<line class="atr1" .../> - 在 CSS 文件中描述图形基元的线条样式。 遗憾的是，在 Internet Explorer 中，对于每个比例，都需要指示其线条样式（线条宽度和虚线间距）。 通常，一个绘图中不会同时使用所有可能的比例，足以仅指定使用的比例。
例如，线条、圆形、路径、矩形等元素的线条样式描述：
line, rect, circle, ellipse, path, text {
vector-effect: non-scaling-stroke;
}
/* main line */
.line-type-1 { fill: none; stroke: blue; stroke-width: 2;
}
/* hairline */
.line-type-2 { fill: none; stroke: black; stroke-width: .7;
}
/* axial */
.line-type-3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4;
}
/* dashed */
.line-type-4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4;
}
/* main line for the scale 0.25 */
.line-type-1_025 { fill: none; stroke: blue; stroke-width: 8;
}
/* hairline for the scale 0.25 */
.line-type-2_025 { stroke: black; stroke-width: 2.8;
}
<g class="dimL">...</g> - 描述对象分组尺寸的元素。
示例：
...
<defs id="defsCAD">
<!-- Draw arrows and tick marks -->
<marker id="dimArrow-1" viewBox="-2 -12 29 24" markerWidth="44" markerHeight="36" orient="auto">
<path class="line-type-2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/>
</marker>
<marker id="dimArrow-2" viewBox="-27 -12 29 24" markerWidth="44" markerHeight="36" orient="auto">
<path class="line-type-2_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="line-type-2" x1="190" y1="180" x2="190" y2="230"/>
<line class="line-type-2" x1="310" y1="180" x2="310" y2="230"/>
<line id="dim1" class="line-type-2" x1="190" y1="230" x2="310" y2="230" marker-start="url(#dimArrow-1)" marker-end="url(#dimArrow-2)"/>
<text x="265" y="222" font-size="28" text-anchor="middle">120</text>
</g>
...
SVG 中显示图形有一个特性。 如果我们设置了区域并想在循环的边缘上绘制它，我们应该拉回地面的线条粗细，否则线条会变薄一半。 例如，代码黑色框架边缘绘图.
<svg id="Shtamp" type="1" x="0" y="0" width="420" height="297" viewBox="0 0 420 297">
...
<rect class="line-type-2" x="1" y="1" width="418" height="295"/>
....
</svg>