Attachment 330454 Details for Bug 181283 – <pattern> with some <use>

pattern_some_use.html (text/html), 3.15 KB, created by Peter Holbein Kapoun on 2018-01-04 03:24:47 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Peter Holbein Kapoun

Created: 2018-01-04 03:24:47 PST

Size: 3.15 KB

patch

obsolete

><!doctype html>
><html>
><head>
>  <meta charset="utf-8">
>  <title>&lt;pattern&gt; with some &lt;use&gt;</title>
>  <style>
>    :root, body, svg {
>      height: 100%;
>      width: 100%;
>      margin: 0;
>      overflow: hidden;
>    }
>  </style>
></head>
><body>
>
><svg>
>  <defs>
>    <g id="argyle11">
>      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(255, 227, 165)" />
>      <g stroke="rgb(255, 170, 113)">
>        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>      </g>
>    </g>
>    <g id="argyle31">
>      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(145, 191, 219)" />
>      <g stroke="rgb(255, 255, 191)">
>        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>      </g>
>    </g>
>    <g id="argyle22">
>      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(255, 170, 113)" />
>      <g stroke="rgb(255, 227, 165)">
>        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>      </g>
>    </g>
>    <g id="argyle13">
>      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(230, 239, 199)" />
>      <g stroke="rgb(255, 170, 113)">
>        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>      </g>
>    </g>
>    <g id="argyle33">
>      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(185, 180, 187)" />
>      <g stroke="rgb(255, 255, 191)">
>        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
>      </g>
>    </g>
>    <pattern
>        id="argyle" x="0" y="0" width="120" height="208"
>        patternUnits="userSpaceOnUse">
>      <g>
>        <use href="#argyle11" transform="translate(0 0)" />
>        <use href="#argyle31" transform="translate(60 0)" />
>        <use href="#argyle11" transform="translate(120 0)" />
>        
>        <use href="#argyle22" transform="translate(30 52)" />
>        <use href="#argyle22" transform="translate(90 52)" />
>        <use href="#argyle22" transform="translate(150 52)" />
>        
>        <use href="#argyle13" transform="translate(0 104)" />
>        <use href="#argyle33" transform="translate(60 104)" />
>        <use href="#argyle13" transform="translate(120 104)" />
>        
>        <use href="#argyle22" transform="translate(30 156)" />
>        <use href="#argyle22" transform="translate(90 156)" />
>        <use href="#argyle22" transform="translate(150 156)" />
>        
>        <use href="#argyle11" transform="translate(0 208)" />
>        <use href="#argyle31" transform="translate(60 208)" />
>        <use href="#argyle11" transform="translate(120 208)" />
>      </g>
>    </pattern>
>  </defs>
>  
>  <g>
>    <circle fill="url(#argyle)" cx="50%" cy="50%" r="25%"></circle>
>  </g>
>
></svg>
>
></body>
></html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>&lt;pattern&gt; with some &lt;use&gt;</title>
  <style>
    :root, body, svg {
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>

<svg>
  <defs>
    <g id="argyle11">
      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(255, 227, 165)" />
      <g stroke="rgb(255, 170, 113)">
        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
      </g>
    </g>
    <g id="argyle31">
      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(145, 191, 219)" />
      <g stroke="rgb(255, 255, 191)">
        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
      </g>
    </g>
    <g id="argyle22">
      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(255, 170, 113)" />
      <g stroke="rgb(255, 227, 165)">
        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
      </g>
    </g>
    <g id="argyle13">
      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(230, 239, 199)" />
      <g stroke="rgb(255, 170, 113)">
        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
      </g>
    </g>
    <g id="argyle33">
      <path d="M0,-52L30,0L0,52L-30,0Z" fill="rgb(185, 180, 187)" />
      <g stroke="rgb(255, 255, 191)">
        <line x1="15" x2="-15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
        <line x1="-15" x2="15" y1="-26" y2="26" stroke-dasharray="2,2" stroke-dashoffset="-1" />
      </g>
    </g>
    <pattern
        id="argyle" x="0" y="0" width="120" height="208"
        patternUnits="userSpaceOnUse">
      <g>
        <use href="#argyle11" transform="translate(0 0)" />
        <use href="#argyle31" transform="translate(60 0)" />
        <use href="#argyle11" transform="translate(120 0)" />
        
        <use href="#argyle22" transform="translate(30 52)" />
        <use href="#argyle22" transform="translate(90 52)" />
        <use href="#argyle22" transform="translate(150 52)" />
        
        <use href="#argyle13" transform="translate(0 104)" />
        <use href="#argyle33" transform="translate(60 104)" />
        <use href="#argyle13" transform="translate(120 104)" />
        
        <use href="#argyle22" transform="translate(30 156)" />
        <use href="#argyle22" transform="translate(90 156)" />
        <use href="#argyle22" transform="translate(150 156)" />
        
        <use href="#argyle11" transform="translate(0 208)" />
        <use href="#argyle31" transform="translate(60 208)" />
        <use href="#argyle11" transform="translate(120 208)" />
      </g>
    </pattern>
  </defs>
  
  <g>
    <circle fill="url(#argyle)" cx="50%" cy="50%" r="25%"></circle>
  </g>

</svg>

</body>
</html>

Actions: View

Attachments on bug 181283: 330453 | 330454 | 330455 | 330456