source) https://upload.wikimedia.org/wikipedia/commons/c/c2/Circulatory_system_SMIL.svg
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-135 -90 270 180"> <title>Circulatory system SMIL</title> <desc>An animated schematic of the heart and circulatory system by CMG Lee. Red and blue represent oxygenated and deoxygenated blood, respectively.</desc> <style type="text/css"> #chamber { stroke:#000000; stroke-width:1; } #vessels,#connector { stroke-width:1; stroke-dasharray:5,1; fill:none; } .fill_d { fill:url(#grad_d); } .fill_o { fill:url(#grad_o); } .stroke_d { stroke:#0066ff; } .stroke_o { stroke:#ff0000; } .bg { stroke:#ffffff; stroke-width:4; stroke-opacity:0.75; } .fg { stroke:#000000; stroke-width:2; } .fade { stroke:none; fill:url(#grad_fade); } </style> <defs> <radialGradient id="grad_fade" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="50%" stop-color="#ffffff" stop-opacity="0.75"/> <stop offset="90%" stop-color="#ffffff" stop-opacity="0"/> </radialGradient> <radialGradient id="grad_d" cx="50%" cy="50%" r="50%" fx="50%" fy="60%"> <stop offset="10%" stop-color="#0066ff"/> <stop offset="90%" stop-color="#0033ff"/> </radialGradient> <radialGradient id="grad_o" cx="50%" cy="50%" r="50%" fx="50%" fy="60%"> <stop offset="10%" stop-color="#ff0000"/> <stop offset="90%" stop-color="#cc0000"/> </radialGradient> <linearGradient id="grad_mask" x1="0%" x2="0%" y1="0%" y2="100%"> <stop offset="40%" stop-color="#000000"/> <stop offset="50%" stop-color="#ffffff"/> </linearGradient> <mask id="mask"><rect x="-499" y="-499" width="999" height="999" fill="url(#grad_mask)"/></mask> <path id="chamber" d="M 0,0 C 40,0 10,-30 0,-30 C -10,-30 -10,0 0,0"/> <path id="vessels" transform="translate(60,0)" d="M -42,45 V 50 C -42,72 52,72 52,50 C 52,40 44,40 44,30 C 44,20 40,20 40,0 C 40,-20 44,-20 44,-30 C 44,-40 52,-40 52,-50 C 52,-72 -72,-72 -72,-50 M -44,45 V 50 C -44,74 54,74 54,50 C 54,40 46,40 46,30 C 46,20 50,20 50,0 C 50,-20 46,-20 46,-30 C 46,-40 54,-40 54,-50 C 54,-74 -74,-74 -74,-50 M -46,45 V 50 C -46,76 56,76 56,50 C 56,40 64,40 64,30 C 64,20 60,20 60,0 C 60,-20 64,-20 64,-30 C 64,-40 56,-40 56,-50 C 56,-76 -76,-76 -76,-50 M -48,45 V 50 C -48,78 58,78 58,50 C 58,40 66,40 66,30 C 66,20 70,20 70,0 C 70,-20 66,-20 66,-30 C 66,-40 58,-40 58,-50 C 58,-78 -78,-78 -78,-50"/> <path id="connector" d="M 18,-20 V 0 M 16,-24 V 0 M 14,-20 V 0 M 20,-24 V 0"/> <path id="valve_base" d="M 0,0 Q 5,0 7,7"/> <g id="valve" stroke-linecap="round" fill="none"> <use xlink:href="#valve_base" class="bg"/> <use xlink:href="#valve_base" class="fg"/> </g> <g id="valve_closed"> <use xlink:href="#valve" transform="translate(-8,0)"/> <use xlink:href="#valve" transform="translate( 8,0) scale(-1,1)"/> </g> <g id="valve_open"> <use xlink:href="#valve" transform="translate(-8,0) rotate(30)"/> <use xlink:href="#valve" transform="translate( 8,0) rotate(-30) scale(-1,1)"/> </g> <path id="arrow_base" d="M 0,5 V -5 M -2,2 L 0,5 L 2,2"/> <g id="arrow" fill="none"> <use xlink:href="#arrow_base" class="bg"/> <use xlink:href="#arrow_base" class="fg"/> </g> <g id="labels" font-family="Helvetica,Arial,sans-serif" font-size="14" letter-spacing="0" text-anchor="middle"> <text transform="translate( -67,-48)" x="0" y="0.6ex" font-weight="bold"><tspan>Right</tspan><tspan x="0" dy="12">atrium</tspan></text> <text transform="translate( 67,-48)" x="0" y="0.6ex" font-weight="bold"><tspan>Left</tspan><tspan x="0" dy="12">atrium</tspan></text> <text transform="translate( -67,-18)" x="0" y="0.6ex"><tspan>Tricuspid</tspan><tspan x="0" dy="12">valve</tspan></text> <text transform="translate( 67,-18)" x="0" y="0.6ex"><tspan>Mitral</tspan><tspan x="0" dy="12">valve</tspan></text> <text transform="translate( -67, 12)" x="0" y="0.6ex" font-weight="bold"><tspan>Right</tspan><tspan x="0" dy="12">ventricle</tspan></text> <text transform="translate( 67, 12)" x="0" y="0.6ex" font-weight="bold"><tspan>Left</tspan><tspan x="0" dy="12">ventricle</tspan></text> <text transform="translate( -67, 42)" x="0" y="0.6ex"><tspan>Pulmonary</tspan><tspan x="0" dy="12">valve</tspan></text> <text transform="translate( 67, 42)" x="0" y="0.6ex"><tspan>Aortic</tspan><tspan x="0" dy="12">valve</tspan></text> <text transform="translate( -67,-80)" x="0" y="0.6ex"><tspan>Pulmonary veins</tspan></text> <text transform="translate( 67,-80)" x="0" y="0.6ex"><tspan>Venae cavae</tspan></text> <text transform="translate( -67, 80)" x="0" y="0.6ex"><tspan>Pulmonary artery</tspan></text> <text transform="translate( 67, 80)" x="0" y="0.6ex"><tspan>Aorta</tspan></text> <text transform="translate(-115, 0)" x="0" y="0.6ex" font-weight="bold"><tspan>Lungs</tspan></text> <text transform="translate( 115,-14)" x="0" y="0.6ex" font-weight="bold"><tspan>Rest</tspan><tspan x="0" dy="12">of the</tspan><tspan x="0" dy="12">body</tspan></text> </g> </defs> <g stroke-linejoin="round" stroke="none" fill="none"> <g> <use xlink:href="#vessels" class="stroke_d"/> <use xlink:href="#vessels" class="stroke_o" mask="url(#mask)"/> <use xlink:href="#vessels" class="stroke_o" transform="scale(-1,1)"/> <use xlink:href="#vessels" class="stroke_d" mask="url(#mask)" transform="scale(-1,1)"/> <animate attributeType="css" attributeName="stroke-dashoffset" values="25;25;0" keyTimes="0;0.4;1" dur="4s" repeatCount="indefinite"/> </g> <g> <use xlink:href="#connector" class="stroke_o"/> <use xlink:href="#connector" class="stroke_d" transform="scale(-1,1)"/> <animate attributeType="css" attributeName="stroke-dashoffset" values="10;0;0" keyTimes="0;0.4;1" dur="4s" repeatCount="indefinite"/> </g> <g> <use xlink:href="#valve_open" transform="translate( 17,-15)"/> <use xlink:href="#valve_open" transform="translate(-17,-15)"/> <use xlink:href="#valve_closed" transform="translate( 16,48)"/> <use xlink:href="#valve_closed" transform="translate(-16,48)"/> <use xlink:href="#arrow" transform="translate(-17,-10)"/> <use xlink:href="#arrow" transform="translate( 17,-10)"/> <animate attributeType="css" attributeName="opacity" values="1;1;0;0" keyTimes="0;0.4;0.4;1" dur="4s" repeatCount="indefinite"/> </g> <g> <use xlink:href="#valve_closed" transform="translate( 17,-15)"/> <use xlink:href="#valve_closed" transform="translate(-17,-15)"/> <use xlink:href="#valve_open" transform="translate( 16, 48)"/> <use xlink:href="#valve_open" transform="translate(-16, 48)"/> <use xlink:href="#arrow" transform="translate(65, -68.5) rotate(90)"/> <use xlink:href="#arrow" transform="translate(-65,-68.5) rotate(-90)"/> <use xlink:href="#arrow" transform="translate(65, 68.5) rotate(-90)"/> <use xlink:href="#arrow" transform="translate(-65, 68.5) rotate(90)"/> <animate attributeType="css" attributeName="opacity" values="0;0;1;1" keyTimes="0;0.4;0.4;1" dur="4s" repeatCount="indefinite"/> </g> <g class="fill_d" transform="translate(-15,-20) scale(-1,1)"> <use xlink:href="#chamber"> <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1;0.7,1;1,1" keyTimes="0;0.4;1" dur="4s" repeatCount="indefinite"/> </use> </g> <g class="fill_o" transform="translate(15,-20)"> <use xlink:href="#chamber"> <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1;0.7,1;1,1" keyTimes="0;0.4;1" dur="4s" repeatCount="indefinite"/> </use> </g> <g class="fill_d" transform="translate(-15,0) scale(-1.1,-1.5)"> <use xlink:href="#chamber"> <animateTransform attributeType="xml" attributeName="transform" type="scale" values="0.7,1;1,1;0.7,1" keyTimes="0;0.4;1" dur="4s" repeatCount="indefinite"/> </use> </g> <g class="fill_o" transform="translate(15,0) scale(1,-1.5)"> <use xlink:href="#chamber"> <animateTransform attributeType="xml" attributeName="transform" type="scale" values="0.7,1;1,1;0.7,1" keyTimes="0;0.4;1" dur="4s" repeatCount="indefinite"/> </use> </g> <g> <!-- <use xlink:href="#labels" stroke="#ffffff" stroke-width="8" stroke-opacity="0.75"/> --> <ellipse class="fade" cx="-115" cy="0" rx="30" ry="20"/> <ellipse class="fade" cx="115" cy="0" rx="30" ry="40"/> <path d="M 25,-10 H 45 M 25,52 H 45 M -25,-10 H -45 M -25,52 H -45" stroke="#999999"/> <use xlink:href="#labels" stroke="none" fill="#000000"/> </g> </g> </svg>
반응형