pattern

by 2 contributors:
この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using the pattern element and then referenced by properties fill and stroke on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern.

Usage context

Categories Container element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Shape elements »
Structural elements »
Gradient elements »
<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
Normative document SVG 1.1 (2nd Edition)

Example

Source code Output result
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <pattern id="Triangle" 
                 width="10" height="10"
                 patternUnits="userSpaceOnUse">
            <polygon points="5,0 10,10 0,10"/>
	    </pattern>
    </defs>

    <circle cx="60" cy="60" r="50"
            fill="url(#Triangle)"/>
</svg>

» pattern.svg

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGPatternElement interface.

ドキュメントのタグと貢献者

Contributors to this page: kscarfone, Jeremie
最終更新者: kscarfone,