使用C#显示SVG动画

最新推荐文章于 2023-03-16 18:02:23 发布

郝伟博士

最新推荐文章于 2023-03-16 18:02:23 发布

阅读量2.8k

点赞数

分类专栏： C#语言详解开发方法与工具文章标签： C# SVG Chrome 浏览器

本文链接：https://blog.csdn.net/weixin_43145361/article/details/108770620

版权

C#语言详解同时被 2 个专栏收录

91 篇文章 27 订阅

订阅专栏

开发方法与工具

72 篇文章 2 订阅

订阅专栏

本文介绍了如何在C# WinForm应用中使用CefSharp库来支持SVG显示。由于C#默认的WebBrowser控件不支持SVG，作者建议通过NuGet安装CefSharp，这是一个基于Chromium的浏览器组件。安装时需要注意.NET Framework版本及运行平台。使用CefSharp，可以方便地加载和操作SVG内容，包括动态绑定和展示SVG图形。

摘要由CSDN通过智能技术生成

简介

SVG是现在越来越多开发人员开始使用的一种矢量图格式，不仅体积小，而且使用游览器直接就可以打开，而且快捷方便。但是使用C#开发，默认的WebBrower并不支持SVG，而调用COM的IE浏览器同样有问题。所以我们使用了第三方的Chorme浏览器来实现。

实现办法

首先需要通过NuGet程序包安装Chrome的核心模块CefSharp，其安装的过程参见《C# WINFORM嵌入CHROME浏览器(CEFSHARP)》。

安装有几点注意事项：

CefSharp的使用.NET Framework 4.5.2及以上版本；
由于框架的限制，所以运行环境必需指定为x86或x64；

使用方法

// 先定义一个浏览器，默认连接为空
ChromiumWebBrowser webview = new ChromiumWebBrowser("");

// 设置基本属性
webview.Dock = DockStyle.Fill;
this.Controls.Add(webview);

可以直接设置其HTML文件

webview.LoadHtml("<html><body>Hello</body></html>");

注：C#WinForm程序还可以直接调用SVG并动态在SVG图上绑值，可以参见此文：https://blog.csdn.net/mqbeauty/article/details/70208424

测试

以下为SVG测试代码：


<!DOCTYPE html>
<html>
	<body>
		<h1>My first SVG</h1>
		<svg align="center" width="300" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
			<circle cx="200" cy="150" r="40" stroke="black" stroke-width="3" fill="blue" />

			<rect x="160" y="160" height="100" width="100"
				  style="stroke:#ff0000; fill: #0000ff">
				<animateTransform
								  attributeName="transform"
								  begin="0s"
								  dur="3s"
								  type="rotate"
								  from="0 210 210"
								  to="360 210 210"
								  repeatCount="indefinite" />
			</rect>
			
			<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
				<animate attributeName="cx" 
						 from="0" 
						 to="100" 
						 dur="5s" 
						 repeatCount="indefinite" />
			</circle>
		</svg> 
	</body>
</html>