A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform below:

patternTransform - SVG | MDN

patternTransform

Baseline Widely available

The patternTransform attribute defines a list of transform definitions that are applied to a pattern tile.

You can use this attribute with the following SVG elements:

Examples
html,
body,
svg {
  height: 100%;
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Apply a transform on the tile -->
  <pattern
    id="p1"
    width=".25"
    height=".25"
    patternTransform="rotate(20)
                      skewX(30)
                      scale(1 0.5)">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Apply the transformed pattern tile -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>
Elements

You can use this attribute with the SVG elements described in the sections below.

<pattern>

For <pattern>, patternTransform defines a list of transform definitions that are applied to a pattern tile.

Note: As of SVG2, it is also allowed to use the CSS transform property. However, the current state of implementation isn't very good. For backward compatibility reason, it is highly suggested to keep using the patternTransform attribute.

Transform functions

To know more about the definition of transform functions, see the transform attribute definition.

Specifications Browser compatibility

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4