Difference between revisions of "SVG Properties"

From Mea Wiki
Jump to navigation Jump to search
(306989)
(306989)
Line 21: Line 21:
  
 
=== Example ===
 
=== Example ===
The following example draws a circle inside a rectangle and places an image in the center of the circle. The rectangle and circle colors are changed when mouse is hovered over the SVG image. The image also has an embedded action named "gotodashboard" which is activated when the SVG image is clicked causing the dashboard to be changed to the dashboard the id of which is defined in the "targetdashboard" context variable.<br>
+
The following example draws a circle inside a rectangle and places an image in the center of the circle. The rectangle and circle colors are changed to the colors defined in the "<style>" element when mouse is hovered over the SVG image. The image also has an embedded action named "gotodashboard" which is activated when the SVG image is clicked causing the dashboard to be changed to the dashboard the id of which is defined in the "targetdashboard" context variable.<br>
 
'''SVG code''':
 
'''SVG code''':
 
<pre>
 
<pre>

Revision as of 12:14, 6 April 2017

An SVG presentation object can be used to draw svg images that scale with the panel size.

SVG Tag Parameters

All the SVG code needs to reside inside a single svg tag. The SVG needs to have at least the following parameters:

  • viewBox: used for resizing to work. See viewBox w3c documentation
  • xmlns: used by some browsers to show content properly.
  • xmlns:svg: used by some browsers to show content properly.

In addition, the preserveAspectRatio parameter can be used to fine-tune the appearance. See preserveAspectRatio w3c documentation

Defining Actions for the SVG

The SVG code can include embedded actions that are triggered by the SVG events, such as clicking the SVG. The actions are embedded by defining them inside the SVG tag as follows:

<svg <SVG event attribute name>=<#action name="actionname">>

Where:

Context Variables in SVG Code

It's possible to use context variables in the SVG code definition. To do this, write the context variable reference as "{#variablename}" (without the quotes). It's even possible to put the whole SVG code into a context variable, and just use the context variable reference in the SVG code.

Example

The following example draws a circle inside a rectangle and places an image in the center of the circle. The rectangle and circle colors are changed to the colors defined in the "<style>" element when mouse is hovered over the SVG image. The image also has an embedded action named "gotodashboard" which is activated when the SVG image is clicked causing the dashboard to be changed to the dashboard the id of which is defined in the "targetdashboard" context variable.
SVG code:

<svg onclick="<#action name="gotodashboard">" viewBox="0 0 205 205" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style >
    .myHoverGroup:hover rect
    \{
      opacity: 0.5;
      fill: #FFFFFF;
    \}
    .myHoverGroup:hover ellipse
    \{      
      stroke: #00CC00;
    \}
</style>
  <g>   
    <rect height="197" width="197" y="5" x="5" stroke-width="0" fill="#CBCBCB" />
    <rect height="197" width="197" y="0" x="0" stroke-width="0" fill="#CBCBCB" />
    <g class="myHoverGroup" cursor="pointer" transform="translate(0,0)">            
      <rect id="rectangle" height="197" width="197" y="0" x="0" stroke-width="1" stroke="#808080" fill="#FAFAFA" />      
      <ellipse ry="68" rx="68" cy="82" cx="100" stroke-width="5" stroke="#FFCCAA" fill-opacity="1" fill="#FFFFFF" />
      <image xlink:href="https://www.qpr.com/sites/default/files/qpr-logo.png" height="105" width="105" y="28" x="47" />
      <text xml:space="preserve" font-size="8" text-anchor="middle" y="167" x="100" stroke-width="0" fill="#808080">Click and hover demo</text>
      <text xml:space="preserve" font-size="10" text-anchor="middle" y="183" x="100" stroke-width="0" fill="#808080">Click me!</text>
    </g>
  </g>
</svg>

SVG Action:

[
 {
  "name": "gotodashboard",
  "contextChanges": {
   "sys:dashboard": {
    "behavior": "FIXED",
    "value": "{#targetdashboard}"
   }
  }
 }
]

Template:MDBTutorialAddSVG