c# 路况发布SVG转换成图片

发布时间 2023-07-27 23:00:52作者: 比特币忠实玩家

引入第三方包

SkiaSharp 

SkiaSharp.Extended

Svg.Skia

 

 

 

 

示例代码

  // 加载SVG文件
            var svg = new SKSvg();
            svg.Load("F:\\svv.svg");

            // 设置图像大小和背景颜色
            var bitmap = new SKBitmap(new SKImageInfo((int)svg.Picture.CullRect.Width, (int)svg.Picture.CullRect.Height));
            using (var canvas = new SKCanvas(bitmap))
            {
                canvas.Clear(SKColors.Transparent);
                canvas.DrawPicture(svg.Picture);
            }

            // 保存为PNG格式图片文件
            using (var stream = new SKFileWStream("F:\\output.png"))
            {
                bitmap.Encode(stream, SKEncodedImageFormat.Png, 5000);
            }

 

SVG代码

   <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 757.755 605.365">
                                <defs>
                                <style>
                                .cls-1 {
                                stroke: #707070;
                                }

                                .cls-2, .cls-5 {
                                fill: none;
                                }

                                .cls-2 {
                                stroke: #52db20;
                                stroke-width: 16px;
                                }

                                .cls-3 {
                                fill: #fff;
                                font-size: 18px;
                                font-family: SourceHanSansCN-Regular, Source Han Sans CN;
                                }

                                .cls-4 {
                                stroke: none;
                                }
                                </style>
                                </defs>
                                <g id="路况图2" transform="translate(-292.619 -240.387)">
                                <g id="矩形_708" data-name="矩形 708" class="cls-1" transform="translate(295 244)">
                                <rect class="cls-4" width="753" height="598" />
                                <rect class="cls-5" x="0.5" y="0.5" width="752" height="597" />
                                </g>
                                <path id="路径_2139" data-name="路径 2139" class="cls-2" d="M-1408.83-5625.238l67.678-66.94" transform="translate(-5054.154 1934.543) rotate(91)" />
                                <path id="路径_2136" data-name="路径 2136" class="cls-2" d="M-1815.646-5646.809l174.484-11.593,578.487-41.851" transform="translate(1812.27 6338.51) rotate(3)" />
                                <path id="路径_2143" data-name="路径 2143" class="cls-2" d="M-1815.646-5648.185l174.484-10.217,578.487-40.258" transform="translate(1811.058 6361.622) rotate(3)" />
                                <path id="路径_2142" data-name="路径 2142" class="cls-2" d="M-1762.224-5659.454l330.474-19.8" transform="translate(1760.692 6301.901) rotate(3)" />
                                <path id="路径_2137" data-name="路径 2137" class="cls-2" d="M-1704.674-5658.916l596.372-38.578" transform="translate(-5025.728 1853.793) rotate(91)" />
                                <path id="路径_2144" data-name="路径 2144" class="cls-2" d="M-1719.715-5657.331l600.645-38.348" transform="translate(-5046.819 1861.755) rotate(91)" />
                                <path id="路径_2138" data-name="路径 2138" class="cls-2" d="M-1414.594-5612.415l69.936-74.782" transform="translate(-4958.873 1839.827) rotate(91)" />
                                <path id="路径_2140" data-name="路径 2140" class="cls-2" d="M-1407.726-5621.09l70.97-63.572" transform="matrix(0.996, -0.087, 0.087, 0.996, 2481.458, 6074.66)" />
                                <path id="路径_2141" data-name="路径 2141" class="cls-2" d="M-1422.344-5616.375l85.9-70.856" transform="matrix(0.996, -0.087, 0.087, 0.996, 2587.693, 6166.051)" />
                                <text id="幸福大道" class="cls-3" transform="translate(805.827 582.748)"><tspan x="0" y="0">幸福大道</tspan></text>
                                <text id="幸福大道-2" data-name="幸福大道" class="cls-3" transform="translate(481.407 650.824)"><tspan x="0" y="0">幸福大道</tspan></text>
                                <text id="幸福大道辅路" class="cls-3" transform="translate(454.783 541.114)"><tspan x="0" y="0">幸福大道辅路</tspan></text>
                                <text id="双_山_南_路" data-name="双山南路" class="cls-3" transform="matrix(0.999, -0.035, 0.035, 0.999, 679.423, 370.545)"><tspan x="0" y="0">双</tspan><tspan x="0" y="31">山</tspan><tspan x="0" y="62">南</tspan><tspan x="0" y="93">路</tspan></text>
                                <text id="双_山_南_路-2" data-name="双山南路" class="cls-3" transform="matrix(0.999, -0.035, 0.035, 0.999, 630.364, 732.414)"><tspan x="0" y="0">双</tspan><tspan x="0" y="31">山</tspan><tspan x="0" y="62">南</tspan><tspan x="0" y="93">路</tspan></text>
                                <path id="路径_2145" data-name="路径 2145" class="cls-2" d="M-1709.228-5658.62l600.926-38.874" transform="translate(-5025.728 1853.793) rotate(91)" />
                                </g>
                                </svg>

生成后的图片

 

 

 

 

 

 这边有个需求是 诱导屏发布路况  需要一个固定的路线 然后根据路段去繁忙程度生成一个SVG格式的图片 里面可以把路段变成红色或者其他颜色 在生成图片 图片再发布到诱导上!