Verwenden des Fill-Elements

In diesem Thema wird VML beschrieben, ein Feature, das ab Windows Internet Explorer 9 veraltet ist. Webseiten und Anwendungen, die auf VML basieren, sollten zu SVG oder anderen allgemein unterstützten Standards migriert werden.

Hinweis

Dieses Thema wurde im Dezember 2011 archiviert. Dadurch wird sie nicht mehr aktiv gepflegt. Weitere Informationen finden Sie unter Archivierte Inhalte. Informationen, Empfehlungen und Anleitungen zur aktuellen Version von Windows Internet Explorer finden Sie unter Internet Explorer Developer Center.

 

Wie Sie gelernt haben, können Sie das Fillcolor-Eigenschaftsattribut eines vordefinierten Shape-Elements wie <oval> , , <line><polyline>, <rect><curve>, , <roundrect>, - <arc> verwenden, um die Farbe anzugeben, die zum Füllen der Form verwendet wird. In diesem Thema wird veranschaulicht, wie sie eine Form zeichnen, die mit erweiterten Effekten gefüllt ist.

Sie können das <fill> Unterelement in oder <shape>oder <shapetype>einem beliebigen vordefinierten Shape-Element platzieren, um zu beschreiben, wie die Form gefüllt werden soll. Anschließend können Sie die Eigenschaftenattribute des <fill> Unterelements verwenden, um den Fülleffekt anzupassen, z. B. Farbverlaufsfüllung, Musterfüllung, Bildfüllung.

In diesem Thema:

• Farbverlaufsfüllung
• Musterfüllung
• Bildfüllung

Farbverlaufsfüllung

Um eine farbverlaufsgefüllte Form zu zeichnen, können Sie das Type-Eigenschaftsattribut des <fill> Unterelements auf "gradient" oder "gradientRadial" festlegen und dann andere Eigenschaftsattribute des <fill> Unterelements angeben, z. B. method, color2, focus und angle.

Beispiele:

Um eine Form zu erstellen, die horizontal mit Farbverlauf gefüllt ist, können Sie das Type-Eigenschaftsattribut auf "gradient" festlegen, wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill type="gradient" />
</v:rect>

Wenn Sie das Fillcolor-Eigenschaftsattribut der Form ändern, wird die Form mit einer anderen Farbe farbverlaufsfüllt. Sie können eine zweite Farbe hinzufügen, indem Sie das color2-Eigenschaftsattribut des <fill> Unterelements angeben. Um beispielsweise eine Form zu erstellen, die farbverlaufsfüllt in zwei Farben ist, können Sie eine zweite Farbe hinzufügen, indem Sie das color2-Eigenschaftsattribut des <fill> Unterelements angeben, wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill color2="blue" type="gradient" />
</v:rect>

Sie können das Attribut der Methodeneigenschaft auf "linear" oder "sigma" oder "any" oder "none" festlegen. Die Auswirkungen des Farbverlaufs unterscheiden sich geringfügig. Außerdem können Sie das Eigenschaftsattribut angle, focussize oder focusposition verwenden, um den Verlauf des Farbverlaufs zu ändern.

Beispiele:

 

Um eine Form zu erstellen, die vertikal mit Farbverlauf gefüllt ist, können Sie das Angle-Eigenschaftsattribut auf angle="-90" festlegen, wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-90"
type="gradient" />
</v:rect>

Um eine Form zu erstellen, die von diagonaler Bewegung nach oben farbverlaufsfüllt wird, können Sie das Angle-Eigenschaftsattribut auf angle="-135" festlegen, wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-135"
type="gradient" />
</v:rect>

Um eine Form zu erstellen, die von einer diagonalen Nach unten bewegten Form farbverlaufsfüllt wird, können Sie das Angle-Eigenschaftsattribut auf angle="-45" festlegen, wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-45"
type="gradient" />
</v:rect>

Um eine Form zu erstellen, die von der Mitte aus farbverlaufsfüllt ist, können Sie angeben angle="-45" focus="100%" focusposition=".5, .5" focussize="0, 0" type="gradientRadial", wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-45"
focus="100%" focusposition=".5,.5" focussize="0,0"
type="gradientRadial" />
</v:rect>

Nach oben

Musterfüllung

Um eine mustergefüllte Form zu zeichnen, können Sie das Type-Eigenschaftsattribut des <fill> Unterelements auf "pattern" festlegen und dann andere Eigenschaftsattribute des <fill> Unterelements angeben, z. B. src und color2.

Beispiele:

Um eine Form zu erstellen, die mit einem Musterbild gefüllt ist, können Sie das Type-Eigenschaftsattribut auf "pattern" angeben und das src-Eigenschaftsattribut auf den Speicherort der Musterbilddatei verweisen, wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill type="pattern" src="image1.gif"/>
</v:rect>

Wenn Sie das src-Eigenschaftsattribut auf eine andere Musterdatei zeigen, können Sie eine Form erstellen, die mit einem anderen Muster gefüllt ist. Außerdem können Sie die Farbe ändern, indem Sie einen anderen Wert für das Eigenschaftsattribut fillcolor oder color2 angeben, wie in der folgenden VML-Darstellung gezeigt:

<v:rect style='width:120pt;height:80pt' fillcolor="white">
<v:fill type="pattern" src="image2.gif"
color2="blue" />
</v:rect>

Nach oben

Bildfüllung

Um ein bildgefülltes Shape zu zeichnen, können Sie das Type-Eigenschaftsattribut des <fill> Unterelements auf "frame" festlegen und dann andere Eigenschaftsattribute des <fill> Unterelements angeben, z. B. src und color2.

Beispiele:

Um eine Form zu erstellen, die mit einer Bilddatei gefüllt ist, können Sie das Type-Eigenschaftsattribut auf "frame" angeben und dann das src-Eigenschaftsattribut auf den Speicherort der Bilddatei verweisen, wie in der folgenden VML-Darstellung gezeigt:

<v:oval style='width:120pt;height:90pt' strokecolor="red"
strokeweight="2.5pt">
<v:fill type="frame" src="image1.jpg" />
</v:oval>

Sie können ganz einfach eine Form erstellen, die mit einem anderen Bild gefüllt ist, indem Sie mit dem src-Eigenschaftsattribut auf eine andere Datei zeigen.

Weitere Informationen zu diesem Element finden Sie in der VML-Spezifikation .