Difference between revisions of "Widget:Curve"

From Hackerspace ACKspace
Jump to: navigation, search
m (testing different sizes)
m (added width and height)
Line 7: Line 7:
 
To insert this widget, use the following code:
 
To insert this widget, use the following code:
  
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
+
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 +
|width=auto
 +
|height=auto
 
|direction=up
 
|direction=up
 
}}</nowiki>
 
}}</nowiki>
Line 13: Line 15:
 
This will give the following result:<br/>
 
This will give the following result:<br/>
 
{{#widget:{{PAGENAME}}
 
{{#widget:{{PAGENAME}}
 +
|width=auto
 +
|height=auto
 
|direction=up
 
|direction=up
 
}}<br/>
 
}}<br/>
Line 20: Line 24:
  
 
</noinclude><includeonly>
 
</noinclude><includeonly>
<div width="400" height="50">
+
<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="width:<!--{$width|escape:html|default:auto}-->;height:<!--{$height|escape:html|default:auto}-->;" preserveAspectRatio="none">
<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
+
   <path d="M0 0 C 100 0, 100 50, 200 50" stroke="black" fill="transparent"></path>
   <path d="M0 0 C 100 0, 100 50, 200 50" stroke="black" fill="transparent"/>
+
   <path d="M0 50 C 100 50, 100 0, 200 0" stroke="black" fill="transparent"></path>
   <path d="M0 50 C 100 50, 100 0, 200 0" stroke="black" fill="transparent"/>
 
 
</svg>
 
</svg>
</div>
 
 
<includeonly>
 
<includeonly>

Revision as of 14:40, 6 April 2018

This widget creates an SVG curve.

Created by xopr

Using this widget

To insert this widget, use the following code:

{{#widget:Curve |width=auto |height=auto |direction=up }}

This will give the following result:

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:Curve article.