Ví dụ, tôi muốn làm một cái gì đó như sau:Có thể thiết lập màu tô và màu nét và độ mờ trên đường dẫn VML bằng CSS không?
.myRedPath {
fillcolor: red;
}
...
<v:path class="myRedPath" v="..."/>
để điền vào đường dẫn của tôi với một màu đỏ. Điều này có thể với màu sắc và độ mờ đục của các thuộc tính tô màu và nét vẽ cho các phần tử VML không? Nếu vậy, làm thế nào?
VML sử dụng thuộc tính thay vì thuộc tính CSS, vì vậy cách duy nhất để tham chiếu chúng trong một biểu định kiểu là thêm một URL hành vi khác tham chiếu đến htc sets attribute values. Nếu không, sử dụng một phần tử HTML để bọc các yếu tố VML và thêm màu nền cho nó:
<!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>
Cảm ơn mã Paul :) Thật không may, tôi không nghĩ rằng nó làm việc cho tôi. Tôi cần phải cụ thể hơn, tôi cần phải tạo kiểu dáng tùy ý như đường dẫn hoặc đa giác. Có thể mở rộng kỹ thuật này cho họ không? –
VML sử dụng thuộc tính thay vì thuộc tính CSS, vì vậy cách duy nhất để tham chiếu chúng trong một biểu định kiểu là thêm một URL hành vi khác tham chiếu đến htc [đặt thuộc tính giá trị] (http://msdn.microsoft.com/en-us /library/bb263839%28VS.85%29.aspx) –
@PaulSweatte - đẹp nhất, bạn nên đính kèm điều này làm câu trả lời. –
Trong IE7, bạn có thể làm như sau:
vml\:polyline
{
strokecolor: expression(this.strokecolor = "red");
fillcolor: expression(this.fillcolor = "green");
}
Nhưng nó không hoạt động trong Tiêu chuẩn IE8 + chế độ, vì vậy không thực sự hữu ích lắm.
Như đã đề cập trong các câu trả lời khác, bạn có thể sử dụng DHMTL behaviors để áp dụng bất kỳ kiểu nào được chỉ định trong biểu định kiểu cho phần tử VML của bạn.
Bắt đầu bằng cách tạo ra một tập tin HTC, ví dụ như: 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>
Sau đó áp dụng nó vào các yếu tố VML của bạn. Ví dụ cụ thể của bạn, bạn sẽ sử dụng:
<style>
v\:path
{
behavior: url(vmlcss.htc);
}
</style>
Cuối cùng, xác định phong cách như trong ví dụ của bạn:
.myRedPath
{
fillcolor: red;
strokecolor: yellow;
}
Bạn có thể muốn thay đổi các tập tin hành vi để hỗ trợ thêm cho all VML attributes.
Người ta có thể sử dụng kỹ thuật như vậy để viết thư viện vẽ hình dạng bằng VML hoặc SVG (tùy thuộc vào hỗ trợ trình duyệt) và cho phép tạo kiểu thông qua CSS. Hỗ trợ cho SVG styles sau đó có thể được thêm vào các đối tượng VML bằng cách sử dụng tệp hành vi như vậy bằng cách ánh xạ từng kiểu SVG đến các thuộc tính VML tương ứng.
Tại sao lại sử dụng VML khi bạn có thể sử dụng Canvas? –
Có thể cho khả năng tương thích ngược. Mặc dù tôi sẽ đề nghị sử dụng Raphael thay vì nó tóm tắt đi sự không tương thích của trình duyệt. – Hyangelo
Có, rất tiếc tôi phải hỗ trợ các phiên bản cũ hơn của IE. Raphael là tuyệt vời, nhưng một trong những điều mà nó có vẻ là mất tích là bạn chỉ có thể tạo kiểu dáng một cách rõ ràng, không phải thông qua CSS. Tôi giả định câu trả lời cho câu hỏi này là "không bạn không thể làm điều đó", nhưng tôi hy vọng rằng tôi chỉ thiếu một cái gì đó :) –