Skip to content

Instantly share code, notes, and snippets.

@kiliankoe

kiliankoe/anreise.svg

Created May 21, 2014 21:39
Show Gist options
  • Save kiliankoe/2dce25f22d1593388cb5 to your computer and use it in GitHub Desktop.
Save kiliankoe/2dce25f22d1593388cb5 to your computer and use it in GitHub Desktop.
Download ZIP
Aufgabe 2: SVG Medien und Medienstroeme @ TU Dresden
Display the source blob
Display the rendered blob
Raw
anreise.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--
Author: Kilian Koeltzsch, 3848487
Getestet mit: Google Chrome 34.0
-->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<style type="text/css"><![CDATA[
text {
font-family: sans-serif;
font-size: 8pt;
}
.important {
font-size: 10pt;
}
#beschreibung, minimap {
display: none;
}
]]></style>
<g transform="translate(-150, 20)">
<circle onmouseover="showMinimap();" onmouseout="hideMinimap();" id="auswahlkreis" fill="#BFD570" stroke="#6C952D" stroke-width="1.5" cx="330" cy="495" r="80" />
<!-- Elbe -->
<path fill="#445F8F" stroke="#294875" stroke-width="0.25" d="M623.045,272.651
c29.067,33.075,42.445,49.013,48.534,57.678l0.003,21.237c-12.847-16.868-38.868-49.726-39.144-49.827
c-0.372-0.138-19.446-21.035-22.894-23.838s-48.627-45.618-85-41.25c-34.947,4.197-46.553,23.303-51,27.75
s-30.244,30.724-53.5,36.75c-16.197,4.196-54.156,7.979-78.25-41c-12.447-25.303-5.466-30.746-22.75-44.25
c-10.947-8.553-18.303-4.197-22.5-2.25c-4.197,1.947-9.026,6.148-15.447,8.697c-9.947,3.947-21.5,4.25-21.5,4.25l4.947,3.303
c0,0,4.947,0.303,8,0.75c3.053,0.447,4,0.5,4,0.5s27.947,13.803,28,14c0.053,0.197-3.5,8-3.5,8s-50.303-26.697-50.5-26.75
c-0.197-0.053-16.053-1.947-25.25-7.25c-9.197-5.303-19.053-17.446-25.5-32.25c-6.447-14.803-15.984-36.25-22.447-43.053
c-4.75-5-7.803-7.947-7.803-7.947l4.5-8.75c0,0,2.447,0.553,2.75,0.5c0.303-0.053,5-4.75,5-4.75s6.293,6.082,10.5,11.75
c9.053,12.197,14.055,38.565,30.553,62.197c9.25,13.25,26.25,16.75,37.447,15.053c11.986-1.816,28.151-12.928,34.303-14.37
c16-3.75,28.207-0.634,36.947,7.12c9.803,8.697,15.197,34.053,16.5,38.25c1.303,4.197,15.274,45.773,56.553,47.197
c15.645,0.539,35.25-10.75,45-20.751c12.566-12.888,39.204-42.188,60-46.25C541.598,216.848,585.742,230.204,623.045,272.651
L623.045,272.651z"/>
<!-- Carolabruecke -->
<g>
<polygon fill="#FFFFFF" points="411,288 423,285 424,301 413,304 411,288"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" d="M410,287
l1.978,2.466l0.875,15l-1.375,1.626 M424,284l-1.5,3.125l1,14.25l0.875,1.5"/>
</g>
<!-- Marienbruecke -->
<g>
<polygon fill="#FFFFFF" points="348,231 353,247 341,259 335,245 348,231 "/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" d="M348,229
l-1.397,2.966l-12.603,11.284l-2.25-0.5 M357,247l-3.022,0.341l-13.875,13.75v2.5"/>
</g>
<!-- Autobahnbruecke -->
<g>
<polygon fill="#FFFFFF" points="226,200 236,207 221,218 212,211 226,200 "/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" d="M210,210
l2.478,0.091l13-10.25l1.147-2.591 M240,207l-3,0.375l-16.397,12.716l0.022,2.659"/>
</g>
<!-- S-Bahn -->
<path fill="none" stroke="#000000" stroke-dasharray="6,3" d="M528.414,507.575c54.272,24.693,99.934,45.523,99.934,45.523
M434.729,465.017c27.319,12.382,64.911,29.468,93.686,42.559 M256.545,394.151c0,0,10.947-5.447,26.25-2.25
c15.303,3.196,20.947,7.553,24,9.5c3.053,1.946,13.447,12.553,48.75,28c10.701,4.682,43.574,19.479,79.184,35.615 M292.083,105.054
c-4.926-2.361-9.958-4.617-15.036-6.696c-41.872-17.141-77.473-31.973-77.473-31.973 M377.606,208.853
c0.843-0.684,1.519-1.207,2.001-1.543c6.58-4.594,14.818-6.965,12.789-23.119c-2.028-16.154-30.682-37.21-32.711-38.365
c-1.544-0.878-38.328-25.089-67.603-40.772 M354.825,229.053c3.798-3.443,13.232-11.982,16.205-14.589 M289.452,306.724
c10.415-21.94,24.939-38.706,27.624-41.537c7.436-7.841,23.603-23.162,37.749-36.133 M279.084,349.962
c-1.489-11.679,1.869-23.882,6.989-36.024 M310.25,403.817c0.176,0.079-24.73-22.142-31.167-53.855 M430.86,140.163
c8.235-14.694,15.609-26.601,17.364-28.524c2.401-2.629,60.07-73.123,60.258-73.292c0.187-0.17,36.297-9.546,55.781-11.961
c7.587-0.94,4.591-1.207,17.182-1.207s65.671,9.33,72.169,10.548 M384.773,204.113c-0.061-0.168,25.639-25.41,36.892-46.976
c1.649-3.162,7.513-13.882,9.195-16.975 M487.042,65.329
c-3.774-14.088-18.932-15.462-23.508-18.532"/>
<!-- S-Bahn S2 -->
<path id="sbahn2" onmouseover="mouseOver();" onmouseout="mouseOut();" fill="none" stroke="#666666" stroke-width="2" stroke-dasharray="6,3" d="M306,401.001c3.053,1.945,10.167,10,44.736,26.216
M377.606,208.853c0.843-0.684,1.519-1.207,2.001-1.543 M354.825,229.053c3.798-3.443,13.232-11.982,16.205-14.589 M289.452,306.724
c10.415-21.939,24.939-38.706,27.624-41.537c7.436-7.841,23.603-23.162,37.749-36.133 M279.084,349.962
c-1.489-11.679,1.869-23.882,6.989-36.023 M310.25,403.817c0.176,0.079-24.73-22.143-31.167-53.855 M430.86,140.163
c8.234-14.694,15.608-26.601,17.363-28.524c2.401-2.629,38.63-46.141,38.818-46.31 M384.773,204.113
c-0.061-0.168,25.639-25.41,36.892-46.976c1.649-3.162,7.513-13.882,9.195-16.975 M487.042,65.329
c-3.774-14.088-18.932-15.462-23.508-18.532"/>
<!-- Hauptbahnhof -->
<rect id="hauptbahnhof" x="331" y="417" transform="matrix(0.885 0.4657 -0.4657 0.885 236.0825 -110.1689)" onmouseover="mouseOver();" onmouseout="mouseOut();" fill="#445F8F"
stroke="#294875" stroke-width="0.8" width="20" height="10"/>
<!-- Bahnhof Neustadt -->
<rect x="375" y="197" transform="matrix(0.6841 -0.7293 0.7293 0.6841 -25.8365 345.0185)" fill="#FFFFFF"
stroke="#000000" stroke-width="0.8" width="20" height="10"/>
<!-- Bahnhof Mitte -->
<rect x="290" y="283" transform="matrix(0.5298 -0.8481 0.8481 0.5298 -103.8481 389.9749)" fill="#FFFFFF"
stroke="#000000" stroke-width="0.8" width="20" height="10"/>
<!-- Strasse -->
<path fill="none" stroke="#D0D0D0" stroke-width="4" d="M412.348,222.849l36,9l101-26l39-2.5l47,10.5l6,3l1.256,5.749l6.744,6.751l21.982,0.254 M411.348,222.849l-29.5-6l-11-9l-1-6.5
l15-114.5 M412.848,223.849l7,96l-21,35.75l-29.5,51.25l-10.787,15.935l-4.845,15.713l-9.869,27.353l-2.5,18l-8.5,80.5" />
<!-- Strasse -->
<path fill="none" stroke="#D0D0D0" stroke-width="4" d="M484.327,30.539l-23.5,57l1,18l-49.999,119
M412.348,222.849l36,9l101-26l39-2.5l47,10.5l6,3l1.256,5.749l6.744,6.751l21.982,0.254 M411.348,222.849l-29.5-6l-11-9l-1-6.5l15-114.5 M412.848,223.849l7,96l-21,35.75l-29.5,51.25l-10.787,15.935l-4.845,15.713
M382.348,384.349l2.5,15l4.5,10l7.5,6.5l26,18l11,9l5,19.5l4.5,14.5l8,11.5l25.5,22l70.5,57 M177.623,289.686l27.337-0.556
l19.55,1.112l27.894,5.775l26.781,10.993l17.881,8.557c0,0,2.781-6.331,3.912-8.396c10.28-18.765,15.396-22.402,30.132-41.822
l19.475-19.475l30.579-28.841"/>
<!-- Autobahn -->
<g>
<path fill="#FFFFFF" stroke="#000000" d="M582.754,4.09c0,0-64.154-2.145-84.813,0
c-20.659,2.146-34.684,0.802-53.05,10.479c-18.367,9.677-17.773,10.424-18.457,10.605s10.271-31.891,10.271-31.891l-6.877-2.292
c0,0-4.792,23.248-11.569,38.41c-0.897,2.006-3.994,4.019-5.846,7.556c-2.02,3.858-5.616,6.959-6.36,8.325
c-6.319,11.598-13.761,25.094-24.034,31.833c-5.269,3.455-23.55,14.228-34.057,18.666c-10.507,4.438-13.727,6.696-15.719,7.859
c-1.992,1.163-4.229,4.404-6.877,6.549c-2.647,2.146-37.304,31.912-39.951,34.712c-2.647,2.8-2.265,4.73-5.239,6.876
c-2.975,2.146-35.339,36.823-40.606,40.934s-26.549,21.687-33.075,26.198c-15.418,10.658-35.066,12.951-35.367,13.099
c-2.866,1.407-0.955,7.352-0.982,7.532c-0.027,0.18,17.055-3.455,21.613-5.567s13.019-4.483,32.092-18.666
c24.861-18.485,43.854-40.753,59.899-57.454c2.948-3.068,34.513-37.217,53.377-48.792c14.409-8.842,28.337-12.797,49.447-25.215
c5.567-3.274,8.592-7.623,22.596-28.162c0.564-0.828,2.198-0.397,2.721-1.157c3.816-2.092,7.949-3.694,10.552-6.66
c1.826-2.082,2.03-10.653,4.062-12.351c2.526-2.11,3.721-3.102,7.582-5.554c12.088-7.679,22.295-12.625,35.693-15.064
s26.881-3.456,32.42-3.602c5.538-0.147,67.067-2.043,71.716-0.328C576.177,11.802,582.754,4.09,582.754,4.09L582.754,4.09z"/>
<polyline fill="none" stroke="#000000" points="416.881,43.965 415.428,46.313 410.41,50.184
415.475,42.275 419.099,37.946 418.641,41.066 416.865,43.965 "/>
</g>
<!-- Flughafen -->
<path id="flughafen" onmouseover="mouseOver();" onmouseout="mouseOut();" fill="#445F8F" stroke="#294875" stroke-width="0.5" d="M456.912,53.448c-0.144,0-0.21-0.265-0.21-0.265l-0.121-0.429l-0.109-0.309c-0.198-0.242-0.728,0-0.728,0
s-2.07,1.003-2.5,1.146s-0.375-0.113-0.375-0.113v-1.165c-0.065-0.341,0.331-0.496,0.331-0.496s1.2-0.826,2.07-1.498
s0.528-1.84,0.528-1.84l-0.374-3.689c0,0-0.43-3.371-0.44-4.362c-0.012-0.991-0.64-0.653-0.64-0.653l-5.221,1.237
c0,0-3.932,0.98-4.759,1.124c-0.825,0.143-0.764-0.387-0.764-0.387s-0.018-0.461,0.004-1.078c0.022-0.617,0.563-0.738,0.563-0.738
l5.1-2.5c0,0,4.715-2.269,5.177-2.445c0.463-0.177,0.43-0.849,0.43-0.849l0.165-1.289l0.353-2.787
c0.198-2.467,0.683-3.69,0.683-3.69c0.529-1.222,0.815-1.08,0.815-1.08l-0.004-0.002c0,0,0.284-0.146,0.814,1.08
c0,0,0.485,1.223,0.683,3.69l0.354,2.787l0.165,1.289c0,0-0.033,0.672,0.43,0.848c0.462,0.176,5.177,2.446,5.177,2.446l5.1,2.5
c0,0,0.54,0.122,0.562,0.738c0.022,0.617,0.005,1.078,0.005,1.078s0.062,0.531-0.765,0.387c-0.826-0.143-4.759-1.123-4.759-1.123
l-5.221-1.238c0,0-0.628-0.337-0.639,0.654c-0.011,0.992-0.44,4.362-0.44,4.362l-0.375,3.69c0,0-0.341,1.167,0.529,1.839
s2.07,1.499,2.07,1.499s0.396,0.154,0.33,0.495v1.165c0,0,0.056,0.256-0.374,0.113c-0.43-0.143-2.5-1.146-2.5-1.146
s-0.529-0.243-0.728,0l-0.11,0.309l-0.121,0.43c0,0-0.066,0.264-0.209,0.264L456.912,53.448L456.912,53.448z"/>
<!-- Text-Labels -->
<g>
<text x='515' y='255' class='important'>Elbe</text>
<rect x="405" y="115" onmouseover="mouseOver();" onmouseout="mouseOut();" fill="white" opacity='0.8' width="75" height="20"/>
<text x='410' y='130' onmouseover="mouseOver();" onmouseout="mouseOut();" class='important'>S-Bahn S2</text>
<rect x="320" y="390" onmouseover="mouseOver();" onmouseout="mouseOut();" fill="white" opacity='0.8' width="95" height="20"/>
<text x='325' y='405' onmouseover="mouseOver();" onmouseout="mouseOut();" class='important'>Hauptbahnhof</text>
<rect x="345" y="166" fill="white" opacity='0.8' width="95" height="20"/>
<text x='350' y='180'>Bahnhof Neustadt</text>
<rect x="245" y="306" fill="white" opacity='0.8' width="75" height="20"/>
<text x='250' y='320'>Bahnhof Mitte</text>
<rect x="235" y="146" fill="white" opacity='0.8' width="75" height="20"/>
<text x='240' y='160'>Autobahn A4</text>
<rect x="464" y="17" onmouseover="mouseOver();" onmouseout="mouseOut();" fill="white" opacity='0.8' width="66" height="20"/>
<text x='467' y='32' onmouseover="mouseOver();" onmouseout="mouseOut();" class='important'>Flughafen</text>
</g>
<!-- Textfeld -->
<g id="beschreibung" transform="translate(-10, 20)">
<rect x="450" y="300" fill="#E6E6E6" opacity='0.5' width="205" height="110"/>
<text x='455' y='315'>Anreise mit dem Flugzeug</text>
<text x='455' y='340'>Im Untergeschoss des Flughafens</text>
<text x='455' y='355'>Dresden-Klotzsche fährt die S-Bahn S2.</text>
<text x='455' y='370'>Fahren Sie bis zum Dresdener Haupt-</text>
<text x='455' y='385'>bahnhof und von dort aus weiter mit</text>
<text x='455' y='400'>der Straßenbahn 3 Richtung Coschütz.</text>
</g>
<clipPath id='cut'>
<circle cx="330" cy="495" r="79.25" />
</clipPath>
<mask id='mask'>
<circle cx="330" cy="495" r="70" />
</mask>
<image id="minimap" xlink:href="campusSimple.svg" x="214.2" y="420" height="180" width="180" clip-path='url(#cut)'/>
</g>
<script type="text/javascript"><![CDATA[
function mouseOver() {
document.getElementById('flughafen').style['fill'] = '#ED5C1D';
document.getElementById('flughafen').style['stroke'] = '#ED5C1D';
document.getElementById('sbahn2').style['stroke'] = '#ED5C1D';
document.getElementById('hauptbahnhof').style['fill'] = '#ED5C1D';
document.getElementById('hauptbahnhof').style['stroke'] = '#ED5C1D';
document.getElementById('beschreibung').style['display'] = 'inline';
}
function mouseOut() {
document.getElementById('flughafen').style['fill'] = '#445F8F';
document.getElementById('flughafen').style['stroke'] = '#294875';
document.getElementById('sbahn2').style['stroke'] = '#666666';
document.getElementById('hauptbahnhof').style['fill'] = '#445F8F';
document.getElementById('hauptbahnhof').style['stroke'] = '#294875';
document.getElementById('beschreibung').style['display'] = 'none';
}
function showMinimap() {
document.getElementById('minimap').style['display'] = 'inline';
document.getElementById('auswahlkreis').style['opacity'] = '0.4';
}
function hideMinimap() {
document.getElementById('minimap').style['display'] = 'none'
document.getElementById('auswahlkreis').style['opacity'] = '1';
}
]]></script>
</svg>
<!--
Farbtabelle:
#E6E6E6, #B2B2B2, #666666 (Grauwerte)
#7791C4, #445F8F, #294875 (Blauwerte)
#BFD570, #9AC339, #6C952D (Grünwerte)
#ED5C1D (Orange)
-->
Display the source blob
Display the rendered blob
Raw
campus.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment