在以特定方位角编程绘制 SVG 图标的帮助下？，我有这个 javascript 片段，可以在我的 HTML 页面中绘制SVG。效果很好。可以在 Windows 环境（可能是批处理或 WinForm）中使用此 javascript 函数而不是 HTML 来创建可以保存在文件夹中的实际SVG文件吗？例如，在 winform 中，我将执行创建 SVG 的 javascript ，并将其保存为物理路径中的myFile.svg 。let svg = document.getElementById("icon");// Add a "line" to the SVG, with a given azimuth, radius and lengthfunction makeLine(azimuth, radius, length){ let circumference = radius * 2 * Math.PI; // Create an SVG <circle> element let line = document.createElementNS(svg.namespaceURI, "circle"); line.setAttribute("r", radius); line.setAttribute("stroke-dasharray", length + ' ' + circumference); line.setAttribute("transform", "rotate(" + azimuth + ")"); // Add it to the <svg> element svg.appendChild(line);}let LEVEL1 = 93;makeLine(300, LEVEL1, 110);svg { width: 100px;}circle { fill: none; stroke: black; stroke-width: 16;}<svg id="icon" viewBox="-100 -100 200 200"></svg>
1 回答
一只甜甜圈
TA贡献1836条经验 获得超5个赞
在 Windows 窗体项目中添加一个WebBrowser组件到您的窗体中，然后您可以javascript像下面这样运行：
private void Form1_Load(object sender, EventArgs e)
{
webBrowser1.DocumentText =
"<html><head><script>" +
@"function makeLine(azimuth, radius, length)
{
var svg = document.getElementById('icon');
let circumference = radius * 2 * Math.PI;
let line = document.createElementNS(svg.namespaceURI, 'circle');
line.setAttribute('r', radius);
line.setAttribute('stroke-dasharray', length + ' ' + circumference);
line.setAttribute('transform', 'rotate(' + azimuth + ')');
svg.appendChild(line);
return svg.outterHtml; //Note: this return line should be added to your code
}"
+ "</script></head><body><svg id=\"icon\" viewBox=\"-100 -100 200 200\"></svg></body></html>";
}
private void button1_Click(object sender, EventArgs e)
{
var result = webBrowser1.Document.InvokeScript("makeLine", new object[] { 300, 93, 110 });
var svg = "<?xml version=\"1.0\" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>";
File.WriteAllText("C:\\a.svg", svg + result.ToString());
}
添加回答
举报
0/150
提交
取消