是否可以使用 CSS 在 VML 路径上设置填充和描边颜色以及不透明度？

发布于 2024-12-23 11:37:20 字数 190 浏览 2 评论 0原文

例如，我想做类似以下的事情：

.myRedPath {
    fillcolor: red;
}

...

<v:path class="myRedPath" v="..."/>

用红色填充我的路径。这对于 VML 元素的填充和描边属性的颜色和不透明度是否可行？如果是这样，怎么办？

原文

For example, I'd like to do something like the following:

.myRedPath {
    fillcolor: red;
}

...

<v:path class="myRedPath" v="..."/>

to fill my paths with a red color. Is this possible with the color and opacity of the fill and stroke attributes for VML elements? If so, how?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

糖粟与秋泊 2024-12-30 11:37:20

正如其他答案中提到的，您可以使用 DHMTL 行为< /a> 将样式表中指定的任何样式应用到 VML 元素，因为 IE5 到 IE9 均支持行为。

首先创建一个 HTC 文件，例如： vmlcss.htc：

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onpropertychange" ONEVENT="onpropertychange()" />
<PUBLIC:METHOD NAME="refresh" />
<SCRIPT LANGUAGE="JScript">

    function onpropertychange()
    {
        if (event.propertyName == "className")
        {
            refresh();
        }
    }

    function refresh()
    {
        // Set any VML attribute you may define in your stylesheet
        element.fillcolor = element.currentStyle["fillcolor"];
        element.strokecolor = element.currentStyle["strokecolor"];
        // etc.
    }

    refresh();

</SCRIPT>
</PUBLIC:COMPONENT>

然后将其应用到您的 VML 元素。对于您的特定示例，您将使用：

<style>
    v\:path
    {
        behavior: url(vmlcss.htc);
    }
</style>

最后，指定示例中所示的样式：

.myRedPath
{
    fillcolor: red;
    strokecolor: yellow;
}

您可能需要修改行为文件以添加对所有 VML 属性。

人们可以使用这样一种技术来编写一个库，该库使用 VML 或 SVG（取决于浏览器支持）绘制形状，并允许通过 CSS 进行样式设置。然后可以使用此类行为文件将对 SVG 样式的支持添加到 VML 对象中通过将每个 SVG 样式映射到相应的 VML 属性。

As mentioned in other answers, you may use DHMTL behaviors to apply any style specified in your style sheet to your VML element as behaviors are supported from IE5 to IE9.

Start by creating a HTC file, eg: vmlcss.htc:

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onpropertychange" ONEVENT="onpropertychange()" />
<PUBLIC:METHOD NAME="refresh" />
<SCRIPT LANGUAGE="JScript">

    function onpropertychange()
    {
        if (event.propertyName == "className")
        {
            refresh();
        }
    }

    function refresh()
    {
        // Set any VML attribute you may define in your stylesheet
        element.fillcolor = element.currentStyle["fillcolor"];
        element.strokecolor = element.currentStyle["strokecolor"];
        // etc.
    }

    refresh();

</SCRIPT>
</PUBLIC:COMPONENT>

Then apply it to your VML elements. For your particular example, you would use:

<style>
    v\:path
    {
        behavior: url(vmlcss.htc);
    }
</style>

Finally, specify the styles as shown in your example:

.myRedPath
{
    fillcolor: red;
    strokecolor: yellow;
}

You may want to modify the behavior file to add support for all VML attributes.

One could use such a technique to write a library that draws shapes using VML or SVG (depending on the browser support) and allows styling through CSS. Support for SVG styles could then be added to the VML objects using such a behavior file by mapping each SVG style to the corresponding VML attributes.

回复收藏 0 原文

九厘米的零° 2024-12-30 11:37:20

在 IE7 中，您可以执行以下操作：

vml\:polyline
{
  strokecolor: expression(this.strokecolor = "red");
  fillcolor: expression(this.fillcolor = "green");
}

但它在 IE8+ 标准模式下不起作用，因此并没有多大用处。

In IE7, you can do following:

vml\:polyline
{
  strokecolor: expression(this.strokecolor = "red");
  fillcolor: expression(this.fillcolor = "green");
}

But it doesn't work in IE8+ Standards mode, so not really that much useful.

回复收藏 0 原文

筱果果 2024-12-30 11:37:20

VML 使用属性而不是 CSS 属性，因此在样式表中引用它们的唯一方法是添加另一个引用 htc 的行为 URL，该 htc 设置属性值。否则，使用 HTML 元素来包装 VML 元素并向其添加背景颜色：

<!doctype html>
<html xmlns:v xmlns:svg='http://www.w3.org/2000/svg'>
  <head>
    <meta charset="UTF-8">
    <title>Lightbox Simple</title>
    <style type="text/css">
    /* Hide scrollbars */
    /*html, body { overflow: hidden; }*/

    /*modal input*/
    .trigger { display:inline-block; }

    /* Hide modal transparency */
    .dialog, .film { position:absolute; left:-7777px; z-index:2; }

    /* modal output */
    a.trigger:hover .dialog { display: block; left:50%; top:50%; width:500px; border: 1px solid #fff; }
    a.trigger:hover .film { left: -3333px; top:-3333px; width:7777px; height:7777px; opacity: .7; background-color: #000; z-index: 3;}

    /* modal content */
    .visible { display: inline-block; background-color: #999; position:absolute; width: 200px; z-index: 4;}

    /* modal off switch */
    .closer { z-index:4; position:absolute; top:0; right:20px; display:block; background-color: #fff; color: #fff; width:0; }

    .placeholder { position:absolute; top:0; left:0; }
    @media,
        {
        v\:rect,v\:fill { behavior:url(#default#VML);}

        .vml_bg
        {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        }

        a.trigger:hover .film { width: 0; }

        .vml_wrap {
        position:absolute;
        left:0;
        top:0;
        width:0;
        height:0;
        display:inline-block;
        }
        a.trigger:hover { visibility: visible; }

        a.trigger:hover .vml_wrap{ width:7777px; height:7777px; }
        }
    </style>
  </head>
  <body>
    <p>hey</p>
    <span class="closer">X</span>
    <a href="#" class="trigger">
        you
        <span class="vml_wrap"><v:rect fillcolor="black" class="vml_bg"><v:fill opacity="0.5" /></v:rect></span>
        <span class="dialog">
            <span class="visible">hi</span>
            <span class="film">
            </span>
        </span>
    </a>
  </body>
</html>

VML uses attributes instead of CSS properties, so the only way to reference them in a style sheet is to add another behavior URL which references a htc which sets attribute values. Otherwise, use a HTML element to wrap the VML element and add the background color to it:

<!doctype html>
<html xmlns:v xmlns:svg='http://www.w3.org/2000/svg'>
  <head>
    <meta charset="UTF-8">
    <title>Lightbox Simple</title>
    <style type="text/css">
    /* Hide scrollbars */
    /*html, body { overflow: hidden; }*/

    /*modal input*/
    .trigger { display:inline-block; }

    /* Hide modal transparency */
    .dialog, .film { position:absolute; left:-7777px; z-index:2; }

    /* modal output */
    a.trigger:hover .dialog { display: block; left:50%; top:50%; width:500px; border: 1px solid #fff; }
    a.trigger:hover .film { left: -3333px; top:-3333px; width:7777px; height:7777px; opacity: .7; background-color: #000; z-index: 3;}

    /* modal content */
    .visible { display: inline-block; background-color: #999; position:absolute; width: 200px; z-index: 4;}

    /* modal off switch */
    .closer { z-index:4; position:absolute; top:0; right:20px; display:block; background-color: #fff; color: #fff; width:0; }

    .placeholder { position:absolute; top:0; left:0; }
    @media,
        {
        v\:rect,v\:fill { behavior:url(#default#VML);}

        .vml_bg
        {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        }

        a.trigger:hover .film { width: 0; }

        .vml_wrap {
        position:absolute;
        left:0;
        top:0;
        width:0;
        height:0;
        display:inline-block;
        }
        a.trigger:hover { visibility: visible; }

        a.trigger:hover .vml_wrap{ width:7777px; height:7777px; }
        }
    </style>
  </head>
  <body>
    <p>hey</p>
    <span class="closer">X</span>
    <a href="#" class="trigger">
        you
        <span class="vml_wrap"><v:rect fillcolor="black" class="vml_bg"><v:fill opacity="0.5" /></v:rect></span>
        <span class="dialog">
            <span class="visible">hi</span>
            <span class="film">
            </span>
        </span>
    </a>
  </body>
</html>

回复收藏 0 原文

~没有更多了~