Question

我意识到从IE9开始不推荐使用VML，但我需要与旧版本兼容。我一直在关注highcharts，以及他们如何使他们的基于SVG的图表与IE 6.0+一起工作，答案是VML。

由于我已经能够在Highcharts的帮助下在IE8中呈现一些示例，我还能够提取一些源代码示例。 This specific chart是我试图理解和重新创建的那个。我不关心动画，工具提示文本或突出显示。我基本上想要了解如何绘制包含曲线的多边形，在这种情况下，作为半圆形饼图的一部分。

下面的代码表示在框架形状内有三个饼图切片的示例。我一直在玩这些数字，但我无法确切地知道以下数值代表什么：

path = " 
wr1120,933,4670,4483,0,2600,1170,2248 
at2058,1870,3733,3545,2081,2510,500,2510 x e"

它们显然代表某种坐标，角度或距离，但是在它们四处游玩之后，搜索文档时，我无法理解。

但是，我发现了（值名为wr1-8和at1-8）：

-wr似乎代表外圈，而at代表内部切口（甜甜圈中的洞）

值wr1-2和at1-2似乎代表整个圆圈的某种掩模。
值wr3-4和at3-4似乎代表某种拱形旋转，或其他与拱相关的东西。所有数字1-4在所有切片中都相等
和at和wr两者的值5-6和7-8似乎表示连续坐标，其中下一个切片从前一个停止的位置开始。但是，当我更改数字时，我找不到模式。我找不到系统。

那么这些价值究竟代表什么呢？或者更好的是，我在哪里可以找到解释这个的文档？

以下是三片半甜甜饼饼图示例的完整代码：

<!doctype html public '-//W3C//DTD html 4.0 Transitional//EN'><%@ Language=VBScript%>
<html xmlns:v='urn:schemas-microsoft-com:vml'>
<STYLE>v\:* {behavior:url(#default#VML);}}</STYLE>



<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px; 
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible; 
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML); 
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round" 
coordsize = "10,10" filled = "t" fillcolor = "#00FF00" stroked = "t" 
strokecolor = "white" strokeweight = ".75pt" 
path = " wr1120,933,4670,4483,0,2600,1170,2248 
at2058,1870,3733,3545,2081,2510,500,2510 x e"><fill style="DISPLAY: 
inline-block; BEHAVIOR: url(#default#VML)" 
xmlns="urn:schemas-microsoft-com:vml" type = "solid" opacity = "1">
</fill></shape>

<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px; 
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible; 
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML); 
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round" 
coordsize = "10,10" filled = "t" fillcolor = "#dddf00" stroked = "t" 
strokecolor = "white" strokeweight = ".75pt" path = " 
wr1120,933,4670,4483,1170,2248,2509,975 
at2058,1870,3733,3545,2713,1890,2081,2510 x e">
<fill style="DISPLAY: inline-block; BEHAVIOR: url(#default#VML)" 
xmlns="urn:schemas-microsoft-com:vml" type = "solid" opacity = "0.5">
</fill></shape>

<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px; 
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible; 
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML); 
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round" 
coordsize = "10,10" filled = "t" fillcolor = "#ed561b" stroked = "t" 
strokecolor = "white" strokeweight = ".75pt" 
path = " wr1120,933,4670,4483,2509,975,2579,961 
at2058,1870,3733,3545,2746,1883,2713,1890 x e">
</shape>

Answer 1

wr表示“顺时针拱”
指“arch to”

在这两种情况下，8个数字代表4（x，y）对的坐标。两个第一对表示椭圆的边界框的左上角和右下角坐标。简单来说，就是在画布上按下鼠标的坐标，以及在MS Paint中绘制圆形时释放鼠标的位置。

最后两对代表坐标，它给出了从圆心到给定坐标的矢量。产生的角度将是给定切片的起始角度和结束角度。

角度仅决定边界圆与矢量之间的切割点。换句话说，角度只给出一个点，而不是一个侧面。内圈和外圈都需要匹配的矢量角度，以提供一个很好的呈现方式，其中分隔甜甜圈切片边缘的线条将全部穿过甜甜圈洞的中心。

有关路径的所有可能命令的详细信息，请参阅：

http://www.w3.org/TR/1998/NOTE-VML-19980513#_Toc416858391

Answer 2

我建议先在SVG中创建，然后转换为VML，如果可能的话。我最近想出了怎么做。

基本上它涉及使用此样式表：http://www.cs.sjsu.edu/faculty/pollett/masters/Semesters/Fall03/JulieNabong/translator.xsl

您还需要Notepad ++及其XML Tools插件。

1 - Open up the SVG file in Notepad++
2 - Go to Plugins --> XML Tools --> XSL Transformations
3 - Select the translator.xsl stylesheet
4 - Click on "Transform"

这里有论文＆＃39;演示页面： http://www.cs.sjsu.edu/faculty/pollett/masters/Semesters/Fall03/JulieNabong/index.shtml?display.html

如何从VML形状创建饼图？

2 个答案: