PSSVG

SVG.title

Synopsis

Creates SVG title elements


Description

The <title> element provides an accessible, short-text description of any SVG container element or graphics element.

Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the <title> element.

Note: For backward compatibility with SVG 1.1, <title> elements should be the first child element of their parent.



Examples

EXAMPLE 1

SVG -ViewBox 1.986,1 -Content @(
    $g = (1.986 * .4) / 12
    $e = (7/13)/10

SVG.defs @( SVG.Star -PointCount 5 -Radius (1/13 * .4) -Fill white -CenterX 0 -CenterY 0 -Rotate 180 -Id Star -Comment “Each Star has a radius of 2/5ths a Bar.” )

SVG.title "American Flag"

SVG.rect -Width 200% -Height 200% -x -50% -y -50% -Fill black

1..13 |
    SVG.rect -Id {"bar$_"} -Fill {
        @("#FFFFFF", "#B22234")[$_ % 2]
    } -Width 100% -Height "$((1/13) * 100)%" -Y { "$((($_ -1)/13 * 100))%" } -Comment "Each Bar is 1/13th the height"


SVG.rect -Fill "#3C3B6E" -Width 40% -Height "$((7/13 * 100))%" -X 0% -Y 0% -Id 'canton' -Comment "The Canton is 40% of the width and 7/13ths of the height"

# Five rows of 6 stars
1..30 |
    SVG.use -Id { "star$($_)" } -Href "#Star" -Comment "Five Rows of Six Stars" -Transform {
        $g = (1.986 * .4) / 12
        $e = (7/13)/10
        "translate($(
            $g + ($g * 2 * ((($_ -1) % 6)))
        ) $(
            $e + (
                $e * 2 * (([Math]::Floor(($_ - 1)/ 6)))
            )
        ))"
    }

# Then interleaved with 4 rows of 5 stars
1..20 |
    SVG.use -Id { "star$($_ + 30)" } -Href "#Star" -Width ($g/2) -Comment "Four Rows of Five Stars" -Children @(
        # SVG.animateTransform -Type 'translate' -From $($g/2) -To $($g/2) -RepeatCount 'indefinite' -Dur 1s -AttributeName transform
        # SVG.animateTransform -Type 'scale' -Values '.75;1.25;.75' -RepeatCount 'indefinite' -Dur ((60/128) * 2)s  -AttributeName transform -Additive 'sum'
    ) -Transform {
        $g = (1.986 * .4) / 12
        $e = (7/13)/10
        "translate($(
            ($g * 2) + ($g * 2 * ((($_ -1) % 5)))
        ) $(
            ($e * 2) + (
                $e * 2 * (([Math]::Floor(($_ - 1)/ 5)))
            )
        ))"
    }

)

EXAMPLE 2

param(
# The smaller Star Size (as a ratio)
[Alias('SmallerStarSize')]
[double]
$StarSizeSmall = .9,
# The larger Star Size (as a ratio)
[Alias('StarSizeBig','LargerStarSize')]
[double]
$StarSizeLarge = 1.1,
# The duration of the animation, in seconds.
# By default, two beats at 128 beats per minute.
[Alias('Interval')]
[double]
$Duration = $((60/128) * 2)
)

SVG -ViewBox 1.986,1 -Content @( $g = (1.986 * .4) / 12 $e = (7/13)/10

SVG.defs @(
    SVG.Star -PointCount 5 -Radius (1/13 * .4) -Fill white -CenterX 0 -CenterY 0 -Rotate 180 -Id Star -Comment "Each Star has a radius of 2/5ths a Bar."
)

SVG.title "American Flag"

SVG.rect -Width 200% -Height 200% -x -50% -y -50% -Fill black

1..13 |
    SVG.rect -Id {"bar$_"} -Fill {
        @("#FFFFFF", "#B22234")[$_ % 2]
    } -Width 100% -Height "$((1/13) * 100)%" -Y { "$((($_ -1)/13 * 100))%" } -Comment "Each Bar is 1/13th the height"


SVG.rect -Fill "#3C3B6E" -Width 40% -Height "$((7/13 * 100))%" -X 0% -Y 0% -Id 'canton' -Comment "The Canton is 40% of the width and 7/13ths of the height"


# Five rows of 6 stars
1..30 |
    SVG.use -Id { "star$($_)" } -Href "#Star" -Comment "Five Rows of Six Stars" -Transform {
        $g = (1.986 * .4) / 12
        $e = (7/13)/10
        "translate($(
            $g + ($g * 2 * ((($_ -1) % 6)))
        ) $(
            $e + (
                $e * 2 * (([Math]::Floor(($_ - 1)/ 6)))
            )
        ))"
    } -Children @(
        SVG.animateTransform -Type 'scale' -Values "$StarSizeLarge;$StarSizeSmall;$StarSizeLarge" -RepeatCount 'indefinite' -Dur $Duration  -AttributeName transform -Additive 'sum'
    )

# Then interleaved with 4 rows of 5 stars
1..20 |
    SVG.use -Id { "star$($_ + 30)" } -Href "#Star" -Width ($g/2) -Comment "Four Rows of Five Stars" -Children @(
        SVG.animateTransform -Type 'scale' -Values "$StarSizeSmall;$StarSizeLarge;$StarSizeSmall" -RepeatCount 'indefinite' -Dur $Duration  -AttributeName transform -Additive 'sum'
    ) -Transform {
        $g = (1.986 * .4) / 12
        $e = (7/13)/10
        "translate($(
            ($g * 2) + ($g * 2 * ((($_ -1) % 5)))
        ) $(
            ($e * 2) + (
                $e * 2 * (([Math]::Floor(($_ - 1)/ 5)))
            )
        ))"
    }

)


Parameters

Content

The Contents of the title element

Type Required Position PipelineInput Aliases
[Object] false 1 true (ByValue, ByPropertyName) InputObject
Text
InnerText
Contents

Data

A dictionary containing data. This data will be embedded in data- attributes.

Type Required Position PipelineInput Aliases
[IDictionary] false named true (ByPropertyName) DataAttribute
DataAttributes

On

A dictionary or object containing event handlers. Each key or property name will be the name of the event Each value will be the handler.

Type Required Position PipelineInput
[Object] false named true (ByPropertyName)

Attribute

A dictionary of attributes. This can set any attribute not exposed in other parameters.

Type Required Position PipelineInput Aliases
[IDictionary] false named true (ByPropertyName) SVGAttributes
SVGAttribute

Comment

A comment that will appear before the element.

Type Required Position PipelineInput Aliases
[String] false named true (ByPropertyName) Comments

Children

One or more child elements. These will be treated as if they were content.

Type Required Position PipelineInput Aliases
[PSObject] false named true (ByPropertyName) Child

Id

The id attribute assigns a unique name to an element.

You can use this attribute with any SVG element.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

Lang

The lang attribute specifies the primary language used in contents and attributes containing text content of particular elements.

There is also an xml:lang attribute (with namespace). If both of them are defined, the one with namespace is used and the one without is ignored.

In SVG 1.1 there was a lang attribute defined with a different meaning and only applying to glyph elements. That attribute specified a list of languages according to . The glyph was meant to be used if the xml:lang attribute exactly matched one of the languages given in the value of this parameter, or if the xml:lang attribute exactly equaled a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix was “-“.

You can use this attribute with any SVG element.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

Tabindex

The tabindex attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.

You can use this attribute with any SVG element.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

XmlBase

The xml:base attribute specifies a base IRI other than the base IRI of the document or external entity.

You can use this attribute with any SVG element.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

XmlLang

The xml:lang attribute specifies the primary language used in contents and attributes containing text content of particular elements.

It is a universal attribute allowed in all XML dialects to mark up the natural human language that an element contains.

There is also a lang attribute (without namespace). If both of them are defined, the one with namespace is used and the one without is ignored.

You can use this attribute with any SVG element.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

XmlSpace

SVG supports the built-in XML xml:space attribute to handle whitespace characters inside elements. Child elements inside an element may also have an xml:space attribute that overrides the parent’s one.

Note: Instead of using the xml:space attribute, use the white-space CSS property.

This attribute influences how browsers parse text content and therefore changes the way the DOM is built. Therefore, changing this attribute’s value through the DOM API may have no effect.

You can use this attribute with any SVG element.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

Class

« SVG Attribute reference home

Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters.

An element’s class name serves two key roles:

You can use this class to style SVG content using CSS.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

Style

The style attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML.

You can use this attribute with any SVG element.

Type Required Position PipelineInput
[PSObject] false named true (ByPropertyName)

Outputs


Syntax

SVG.title [[-Content] <Object>] [-Data <IDictionary>] [-On <Object>] [-Attribute <IDictionary>] [-Comment <String>] [-Children <PSObject>] [-Id <PSObject>] [-Lang <PSObject>] [-Tabindex <PSObject>] [-XmlBase <PSObject>] [-XmlLang <PSObject>] [-XmlSpace <PSObject>] [-Class <PSObject>] [-Style <PSObject>] [<CommonParameters>]