mozilla

Compare Revisions

mask

Change Revisions

Revision 91595:

Revision 91595 by Jeremie on

Revision 91596:

Revision 91596 by Jeremie on

Title:
mask
mask
Slug:
SVG/Element/mask
SVG/Element/mask
Tags:
SVG, "SVG Element", NeedsCompatTable
SVG, "SVG Element", NeedsCompatTable
Content:

Revision 91595
Revision 91596
t53    <pre class="brush: xml">t53    <table class="standard-table">
54&lt;?xml version="1.0" standalone="no"?&gt;54      <tbody>
55&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 55        <tr>
56  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;56          <th scope="col">
57&lt;svg width="8cm" height="3cm" viewBox="0 0 800 300" version="157            Source code
>.1" 
58     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w58          </th>
>3.org/1999/xlink"&gt; 
59 59          <th scope="col">
60  &lt;defs&gt;60            Output result
61    &lt;linearGradient id="Gradient" gradientUnits="userSpaceOnUs61          </th>
>e" 
62                    x1="0" y1="0" x2="800" y2="0"&gt;62        </tr>
63      &lt;stop offset="0" stop-color="white" stop-opacity="0" /&g63        <tr>
>t; 
64      &lt;stop offset="1" stop-color="white" stop-opacity="1" /&g64          <td>
>t; 
65    &lt;/linearGradient&gt;65            {{ embed_text("mask.svg", "xml") }}
66 66          </td>
67    &lt;mask id="Mask" maskUnits="userSpaceOnUse"67          <td>
68          x="0" y="0" width="800" height="300"&gt;68            {{ EmbedSVG("mask.svg",120,120) }}
69      &lt;rect x="0" y="0" width="800" height="300" fill="url(#Gr69          </td>
>adient)"  /&gt; 
70    &lt;/mask&gt;70        </tr>
71 71      </tbody>
72    &lt;text id="Text" x="400" y="200" 72    </table>
73          font-family="Verdana" font-size="100" text-anchor="midd
>le" &gt; 
74      Masked text
75    &lt;/text&gt;
76  &lt;/defs&gt;
77 
78  &lt;!-- Draw a pale red rectangle in the background --&gt;
79  &lt;rect x="0" y="0" width="800" height="300" fill="#FF8080" /&
>gt; 
80  
81  &lt;!-- Draw the text string twice. First, filled blue, with th
>e mask applied. 
82       Second, outlined in black without the mask. --&gt;
83  &lt;use xlink:href="#Text" fill="blue" mask="url(#Mask)" /&gt;
84  &lt;use xlink:href="#Text" fill="none" stroke="black" stroke-wi
>dth="2" /&gt; 
85&lt;/svg&gt;
86</pre>

Back to History