mozilla

Compare Revisions

Applying SVG effects to HTML content

Change Revisions

Revision 421635:

Revision 421635 by Sheppy on

Revision 483775:

Revision 483775 by codepo8 on

Title:
Applying SVG effects to HTML content
Applying SVG effects to HTML content
Slug:
Applying_SVG_effects_to_HTML_content
Applying_SVG_effects_to_HTML_content
Tags:
"SVG", "XHTML", "HTML", "CSS", "Guide"
"CSS", "SVG", "HTML", "Guide", "XHTML"
Content:

Revision 421635
Revision 483775
tt163    </p>
164    <h2>
165      Blurred Text
166    </h2>
167    <p>
168      In order to blur text webkit based browsers have a (prefixe
 >d) CSS filter called blur. You can achieve the same effect using 
 >SVG filters.&nbsp;
169    </p>
170    <pre class="brush: html">
171 &lt;p class="blur"&gt;Time to clean my glasses&lt;/p&gt;
172 &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
173  &lt;defs&gt;
174    &lt;filter id="wherearemyglasses" x="0" y="0"&gt;
175      &lt;feGaussianBlur in="SourceGraphic" stdDeviation="1" /&gt
 >;
176    &lt;/filter&gt;
177  &lt;/defs&gt;
178&lt;/svg&gt;
179</pre>
180    <p>
181      You can apply the SVG and the CSS filter in the same class:
182    </p>
183    <pre class="brush: css">
184.blur {
185  filter:url(#wherearemyglasses);
186  /* ^ for Firefox */
187  -webkit-filter: blur(1px);  
188  /* ^ Webkit browsers */
189  filter: blur(1px);  
190}
191</pre>
192    <p>
193      Blurring is computation heavy, so ensure to use it sparingl
 >y, especially in elements that get scrolled or animated.

Back to History