猿问

从Windows环境调用javascript函数来生成myfile.svg？

在以特定方位角编程绘制 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 length

function 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>


小唯快跑啊
浏览 103回答 1
1回答

一只甜甜圈

在 Windows 窗体项目中添加一个WebBrowser组件到您的窗体中，然后您可以javascript像下面这样运行：&nbsp; private void Form1_Load(object sender, EventArgs e)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; webBrowser1.DocumentText =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<html><head><script>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @"function makeLine(azimuth, radius, length)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var svg = document.getElementById('icon');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let circumference = radius * 2 * Math.PI;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let line = document.createElementNS(svg.namespaceURI, 'circle');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line.setAttribute('r', radius);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line.setAttribute('stroke-dasharray', length + ' ' + circumference);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line.setAttribute('transform', 'rotate(' + azimuth + ')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; svg.appendChild(line);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return svg.outterHtml; //Note: this return line should be added to your code&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + "</script></head><body><svg id=\"icon\" viewBox=\"-100 -100 200 200\"></svg></body></html>";&nbsp; &nbsp; }&nbsp; &nbsp; private void button1_Click(object sender, EventArgs e)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var result = webBrowser1.Document.InvokeScript("makeLine", new object[] { 300, 93, 110 });&nbsp; &nbsp; &nbsp; &nbsp; var svg = "<?xml version=\"1.0\" ?><!DOCTYPE svg&nbsp; PUBLIC '-//W3C//DTD SVG 1.1//EN'&nbsp; 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>";&nbsp; &nbsp; &nbsp; &nbsp; File.WriteAllText("C:\\a.svg", svg + result.ToString());&nbsp; &nbsp; }
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答