The <shape> Element

The <shape> element is the primary one in VML, although I rarely find myself using it in practice (I mostly use the predefined shapes based on <shape>). This element may appear by itself or within a <group> element. The <shape> element includes all the attributes in coreattrs and shapeattrs, and adds three more:

<!attlist shape %coreattrs; %shapeattrs;
type cdata #implied -- reference to shapetype --
adj cdata #implied -- list of adjust values for parameterized paths --
path cdata #implied -- string with command set describing a path --
>

For the sake of reference, all the attributes of this element and their descriptions appear in Table 19.2; note that VML attributes can be part of either the VML or the CSS namespaces.

Table 19.2. Attributes of the <shape> Element
NamespaceAttributeTypeDefault ValueDescription
CSSflipStringnullSpecifies that the shape image inside the reference rectangle should be flipped along the given axes in the order specified. Takes the values "x", "y", or both.
CSSheightNumber100Specifies the height of the containing block of the shape.
CSSleft, margin-left, center-x, etcNumber0Sets the position of the left of the containing block of the shape.
CSSpositionstring"static"Sets the CSS type of positioning. When inside a group, this value must always be "absolute".
CSSrotationnumber0Specifies the angle by which to rotate.
CSStop, margin-top, center-y, etcnumber0Sets the position of the top of the containing block of the shape.
CSSvisibilitystringvisibleSets the visibility of shapes.
CSSwidthnumber100Specifies the width of the container rectangle of the shape.
CSSz-indexnumber0Specifies the z-index of the shape. Positive numbers come out of the screen, and negative ones go into it.
VMLadjstringnullIs a comma-separated list of numbers that are "adjusting" parameters for the formulas that define the path of the shape.
VMLaltstringnullText associated with the shape that may appear instead of the shape.
VMLchromakeycolornullSets a color value that will be transparent so that anything behind the shape will show through.
VMLclassstringnullGives the CSS class of this shape.
VMLcoordoriginVector2D"0 0"Gives the coordinates at the top-left corner of the containing block.
VMLcoordsizeVector2D"1000 1000"Gives the width and height of the coordinate space inside the containing block of this shape.
VMLfillbooleantrueIf "true", the path defining the shape will be filled.
VMLfillcolorcolor"white"Specifies the color of the brush to use to fill the path of this shape.
VMLhrefstringnullSpecifies the URI to jump to when this shape is clicked.
VMLidstringnullA unique identifier for the shape.
VMLopacitynumber1.0Sets the opacity of the entire shape. Set this to values between 0 (transparent) and 1 (opaque.)
VMLpathstringnullSpecifies the path that defines the shape—a string containing the commands that define the path.
VMLprintbooleantrueIf true, this shape should be printed.
VMLstrokebooleantrueIf true, the path defining the shape will be stroked (rendered) using a solid line, unless there is a stroke subelement.
VMLstrokecolorcolor"black"Sets the color of the brush to use to draw the path of this shape.
VMLstroke weightnumber"0.75pt"Sets the width of the brush to use to stroke the path.
VMLtargetstringnullThe target frame URI.
VMLtitlestringnullGives the title of the shape.
VMLtypestringnullHolds a shapetype ID that describes the shape.
VMLvstringnullA string containing the commands that define the path.
VMLWrapcoordsstringnullUsed for the wrapping text around an object.

Microsoft gives all VML elements an "XML template" that specifies default values for each of its attributes; here's the XML template for the <shape> element:

<shape
type=null
adj=null
path=null
opacity="100%"
chromakey="none"
stroke="true"
strokecolor="black"
strokeweight="0.75pt"
fill="true"
fillcolor="white"
print="true"
id=null
class=null
style='visibility: visible'
title=null
href=null
target=null
alt=null
coordsize="1000, 1000"
coordorigin="0, 0"
wrapcoords=null
/>

Using the <shape> element to draw shapes can be a little complex because you need to define the whole shape yourself, which you do by specifying a VML path. Doing that means giving the actual locations to use to draw the shape. To show how that works, I'll use a shape that Microsoft supports in its reference material; it draws a heart:

<HTML xmlns:v="urn:schemas-microsoft-com:vml">

    <HEAD>
        <TITLE>
            Using Vector Markup Language
        </TITLE>

        <STYLE>
        v:* {behavior: url(#default#VML);}
        </STYLE>
    </HEAD>

    <BODY>
        <CENTER>
            <H1>
                VML Shapes
            </H1>
            <v:shape fillcolor="red"
                strokecolor="red" coordsize="21600,21600"
                path="m10860,2187c10451,1746,9529,1018,9015,730,
                7865,152,6685,,5415,,4175, 152,2995,575,1967,
                1305,1150,2187,575,3222,242,4220,,5410,242,6560,
                575,7597l10860, 21600,20995,7597c21480,6560,
                21600,5410,21480,4220,21115,3222,20420,2187,19632,
                1305,18575,575,17425,152,16275,,15005,,13735,152,
                12705,730,12176,1018,11254,1746, 10860,2187xe"
                style='width:200;height:160;'/>
        </CENTER>
    </BODY>
</HTML>

You can see the results in Figure 19.2.

Figure 19.2. Using the <shape> element.


Another way of drawing this shape is to specify the shape's path in a <shapetype> element and then reference the <shapetype> element's ID with the <shape> element's type attribute:

<HTML xmlns:v="urn:schemas-microsoft-com:vml">

    <HEAD>
        <TITLE>
            Using Vector Markup Language
        </TITLE>

        <STYLE>
        v:* {behavior: url(#default#VML);}
        </STYLE>
    </HEAD>

    <BODY>
        <CENTER>
            <H1>
                VML Shapes
            </H1>
            <v:shapetype id="Valentine" fillcolor="red"
                strokecolor="red" coordsize="21600,21600"
                path="m10860,2187c10451,1746,9529,1018,9015,730,
                7865,152,6685,,5415,,4175, 152,2995,575,1967,
                1305,1150,2187,575,3222,242,4220,,5410,242,6560,
                575,7597l10860, 21600,20995,7597c21480,6560,
                21600,5410,21480,4220,21115,3222,20420,2187,19632,
                1305,18575,575,17425,152,16275,,15005,,13735,152,
                12705,730,12176,1018,11254,1746, 10860,2187xe">
            </v:shapetype>
            <v:shape type="#Valentine" style='width:200;height:160;'/>
        </CENTER>
    </BODY>
</HTML>

However, unless you have a drawing tool of some kind, it's pretty tedious to calculate all the points in a path; it's usually far easier to use the predefined shapes.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.242.118