Похоже, что SVG может легко нарисовать дугу, может ли VML сделать это в IE 7 и выше?

Следующее может легко нарисовать две дуги с помощью SVG, и это работает в Firefox или Chrome:

пример страницы: http://jsfiddle.net/j8aN9/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="80">

<path fill="none" stroke="#41b419" d="M40,5A35,35,0,1,1,5,40.00000000000001" style="stroke-width: 10px; " stroke-width="10"></path>

<path fill="none" stroke="#b5e5a5" d="M5,40.00000000000001A35,35,0,0,1,39.999999999999986,5" style="stroke-width: 10px; " stroke-width="10"></path>

</svg>

Может ли VML сделать это легко, чтобы он работал даже в IE 7 и выше? (можете ли вы привести пример рисования такой дуги, как показано выше?)


svg vml
person nonopolarity    schedule 19.04.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эквивалент VML будет выглядеть примерно так:

<?xml:namespace prefix = rvml ns = "urn:schemas-microsoft-com:vml" />
<rvml:group style="POSITION: absolute; WIDTH: 1000px; HEIGHT: 1000px; TOP: 0px; LEFT: 0px" class=rvml coordsize = "10000,10000">
    <rvml:shape style="WIDTH: 1000px; HEIGHT: 1000px" class=rvml coordsize = "1000,1000" filled = "f" stroked = "t" strokecolor = "#41b419" strokeweight = "7.5pt" path = " m400,50 c669,50,838,342,703,575,568,808,232,808,97,575,66,522,50,461,50,400 e">
      <rvml:fill class=rvml></rvml:fill>
      <rvml:stroke class=rvml opacity = "1" miterlimit = "8"></rvml:stroke>
    </rvml:shape>
</rvml:group>
<rvml:group style="POSITION: absolute; WIDTH: 1000px; HEIGHT: 1000px; TOP: 0px; LEFT: 0px" class=rvml coordsize = "10000,10000">
    <rvml:shape style="WIDTH: 1000px; HEIGHT: 1000px" class=rvml coordsize = "1000,1000" filled = "f" stroked = "t" strokecolor = "#b5e5a5" strokeweight = "7.5pt" path = " m50,400 c50,207,207,50,400,50 e">
      <rvml:fill class=rvml></rvml:fill>
      <rvml:stroke class=rvml opacity = "1" miterlimit = "8"></rvml:stroke>
    </rvml:shape>
</rvml:group>

Но я обнаружил это, используя Raphaël, чтобы нарисовать фигуру, а затем получить разметку с помощью инструментов разработчика:

var paper = Raphael(document.getElementById("drawing"), 80, 80);
var c1 = paper.path("M40,5A35,35,0,1,1,5,40.00000000000001");
c1.attr({
    fill: "none",
    "stroke": "#41b419",
    "stroke-width": "10"
});
var c2 = paper.path("M5,40.00000000000001A35,35,0,0,1,39.999999999999986,5");
c2.attr({
    fill: "none",
    "stroke": "#b5e5a5",
    "stroke-width": "10"
});

Использование Raphaël может быть лучшим подходом, если вам нужно поддерживать браузеры с поддержкой IE и SVG.

person robertc    schedule 19.04.2011
comment
поэтому, используя Raphael, мы действительно можем нарисовать дугу... и это с помощью простого пути, как показано выше? Я следовал некоторому примеру в StackOverflow, в котором есть один MoveTo и множество LineTo, чтобы добиться эффекта дуги - рисовать множество линий для имитации части круга. - person nonopolarity; 19.04.2011
comment
как вы получаете такой VML? и как сделать из VML отдельную страницу? Я поместил ваш код Raphael на страницу, и он действительно работает в IE 7 и 8. Но с помощью Firebug Lite я не могу получить VML, как вы, как вы их получаете? topics2look.com/code-examples/ VML/ и topics2look.com/code-examples /VML/arc-by-raphael.html - person nonopolarity; 19.04.2011
comment
@動靜能量 Я использовал инструменты разработчика в IE8 (нажал F12), выбрал родительский узел в инспекторе DOM и выбрал «Копировать InnerHTML». Я считаю, что методы Рафаэля LineTo и MoveTo на самом деле просто слой поверх path. - person robertc; 19.04.2011
comment
о, другое решение просто использует Path тоже... но есть один переход и тонны строк: stackoverflow.com/questions/5061318/ - person nonopolarity; 19.04.2011