examples/payment.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="287px" preserveAspectRatio="none" style="width:683px;height:287px;background:#FFFFFF;" version="1.1" viewBox="0 0 683 287" width="683px" zoomAndPan="magnify"><defs/><g><!--MD5=[2766a367a4a8c35b562b373df6255952]
cluster payment--><g id="cluster_payment"><rect height="274" rx="12.5" ry="12.5" style="stroke:#181818;stroke-width:0.5;fill:none;" width="669" x="7" y="7"/><rect height="245.7031" rx="12.5" ry="12.5" style="stroke:#00000000;stroke-width:1.0;fill:none;" width="667" x="8" y="34.2969"/><line style="stroke:#181818;stroke-width:0.5;fill:none;" x1="7" x2="676" y1="33.2969" y2="33.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="60" x="311.5" y="23.9951">payment</text></g><!--MD5=[d75b03198d9dbaab8b68f2ae3db48da6]
cluster payment.method--><g id="cluster_payment.method"><rect height="191" rx="12.5" ry="12.5" style="stroke:#181818;stroke-width:0.5;fill:none;" width="436" x="208" y="58"/><rect height="162.7031" rx="12.5" ry="12.5" style="stroke:#00000000;stroke-width:1.0;fill:none;" width="434" x="209" y="85.2969"/><line style="stroke:#181818;stroke-width:0.5;fill:none;" x1="208" x2="644" y1="84.2969" y2="84.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="54" x="399" y="74.9951">method</text></g><ellipse cx="55" cy="85" fill="#222222" rx="10" ry="10" style="stroke:none;stroke-width:1.0;"/><g id="payment.method.payment.review"><rect fill="#F1F1F1" height="50" rx="12.5" ry="12.5" style="stroke:#181818;stroke-width:0.5;" width="64" x="23" y="144"/><line style="stroke:#181818;stroke-width:0.5;" x1="23" x2="87" y1="170.2969" y2="170.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="44" x="33" y="161.9951">review</text></g><ellipse cx="257" cy="130" fill="#222222" rx="10" ry="10" style="stroke:none;stroke-width:1.0;"/><g id="payment.method.payment.method.cash"><rect fill="#F1F1F1" height="50" rx="12.5" ry="12.5" style="stroke:#181818;stroke-width:0.5;" width="53" x="343" y="116"/><line style="stroke:#181818;stroke-width:0.5;" x1="343" x2="396" y1="142.2969" y2="142.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="33" x="353" y="133.9951">cash</text></g><g id="payment.method.cash.payment.method.check"><rect fill="#F1F1F1" height="50" rx="12.5" ry="12.5" style="stroke:#181818;stroke-width:0.5;" width="62" x="558" y="141"/><line style="stroke:#181818;stroke-width:0.5;" x1="558" x2="620" y1="167.2969" y2="167.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="42" x="568" y="158.9951">check</text></g><g id="payment.method.hist"><rect fill="#F1F1F1" height="50" rx="12.5" ry="12.5" style="stroke:#181818;stroke-width:0.5;" width="50" x="232" y="175"/><line style="stroke:#181818;stroke-width:0.5;" x1="232" x2="282" y1="201.2969" y2="201.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="25" x="244.5" y="192.9951">hist</text></g><!--MD5=[85d0090473481db7178ec6da4ec42033]
link *start*payment to payment.method--><g id="link_*start*payment_payment.method"><path d="M65.11,85 C84.37,85 130.9125,85 173.2163,85 C183.7922,85 194.1032,85 203.6568,85 C204.851,85 206.0333,85 207.2029,85 " fill="none" id="*start*payment-to-payment.method" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="207.2029,85,198.2029,81,202.2029,85,198.2029,89,207.2029,85" style="stroke:#181818;stroke-width:1.0;"/></g><!--MD5=[1e7b484909643e0294ef4e6cb770dea4]
link *start*payment.method to payment.method.cash--><g id="link_*start*payment.method_payment.method.cash"><path d="M267.04,130.9 C282.35,132.42 314.01,135.58 337.92,137.96 " fill="none" id="*start*payment.method-to-payment.method.cash" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="342.9,138.45,334.3441,133.5719,337.925,137.9511,333.5458,141.532,342.9,138.45" style="stroke:#181818;stroke-width:1.0;"/></g><!--MD5=[17f6254e65e136057294c374356c8acf]
link payment.method to payment.review--><g id="link_payment.method_payment.review"><path d="M207.8675,92.5458 C207.4382,92.6953 207.0098,92.8477 206.5825,93.0031 C204.8735,93.6248 203.1821,94.2946 201.5202,95.0164 C198.1966,96.46 194.9913,98.1113 192,100 C187.19,103.04 188.48,106.49 184,110 C156.24,131.72 119.2,147.68 92.11,157.48 " fill="none" id="payment.method-to-payment.review" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="87.17,159.24,96.9913,159.9762,91.8781,157.5565,94.2977,152.4433,87.17,159.24" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="33" x="134" y="106.0669">NEXT</text></g><!--MD5=[ac5114bea2178850fac002e5f2ee8b02]
link payment.method.cash to payment.method.check--><g id="link_payment.method.cash_payment.method.check"><path d="M389.86,166.14 C399.46,176.55 412,187.47 426,193 C468.16,209.66 483.68,202.51 528,193 C536.32,191.21 544.89,188.18 552.84,184.77 " fill="none" id="payment.method.cash-to-payment.method.check" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="557.71,182.61,547.8611,182.6043,553.1398,184.638,551.106,189.9167,557.71,182.61" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="100" x="427" y="189.0669">SWITCH_CHECK</text></g><!--MD5=[3ecde9b1ab78bfc054ed321c2d7a1249]
link payment.method.check to payment.method.cash--><g id="link_payment.method.check_payment.method.cash"><path d="M557.7,162.52 C516.46,157.78 443.04,149.34 401.46,144.56 " fill="none" id="payment.method.check-to-payment.method.cash" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="396.3,143.97,404.7844,148.9716,401.2673,144.541,405.6979,141.0239,396.3,143.97" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="93" x="430.5" y="144.0669">SWITCH_CASH</text></g><!--MD5=[cba2b3d9c9e7bdb5044f0be821326750]
link payment.review to payment.method.hist--><g id="link_payment.review_payment.method.hist"><path d="M87.14,178.12 C96.66,180.65 107.2,183.2 117,185 C154.64,191.93 198.65,196.01 226.9,198.13 " fill="none" id="payment.review-to-payment.method.hist" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="231.99,198.5,223.312,193.8424,227.0038,198.1285,222.7177,201.8203,231.99,198.5" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="65" x="118" y="181.0669">PREVIOUS</text></g></g></svg>