for my project i am using Highcharts, The style is defined by some Javascript and i was wondering if it is somehow possible to resize the SVG or the parents container?
Here's my code:
<div id="beteiligungs_chart">
<div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 1706px; height: 400px; text-align: left; line-height: normal; z-index: 0; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; cursor: auto;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1706" height="400">
<defs>
<clipPath id="highcharts-1">
<rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="400" stroke-width="0.000001"></rect>
</clipPath>
<clipPath id="highcharts-2">
<rect fill="none" x="0" y="0" width="1706" height="400"></rect>
</clipPath>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-3">
<stop offset="0" stop-color="rgb(54,93,150)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(54,93,150)" stop-opacity="1"></stop>
</radialGradient>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-4">
<stop offset="0" stop-color="rgb(8,71,153)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(8,71,153)" stop-opacity="1"></stop>
</radialGradient>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-5">
<stop offset="0" stop-color="rgb(80,139,28)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(80,139,28)" stop-opacity="1"></stop>
</radialGradient>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-6">
<stop offset="0" stop-color="rgb(25,125,31)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(25,125,31)" stop-opacity="1"></stop>
</radialGradient>
</defs>
<rect rx="5" ry="5" fill="rgb(0,0,0)" x="0" y="0" width="1706" height="400" stroke-width="0.000001" fill-opacity="0"></rect>
<g class="highcharts-series-group" zIndex="3"></g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-3)" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-4)" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-5)" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-6)" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-legend" zIndex="7">
<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="7" height="7" stroke-width="1" stroke="#909090" visibility="hidden"></rect>
<g zIndex="1" clip-path="url(http://gw.lo/print/5132#highcharts-1)">
<g></g>
</g>
</g>
<g class="highcharts-tooltip" zIndex="8" style="padding:0;white-space:nowrap;" visibility="hidden">
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="5" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></rect>
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="3" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></rect>
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="1" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.15" transform="translate(1, 1)"></rect>
<rect rx="5" ry="5" fill="rgb(255,255,255)" x="0" y="0" width="10" height="10" stroke-width="2" fill-opacity="0.85"></rect>
<text x="5" y="18" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" zIndex="1"></text>
</g>
<g class="highcharts-tracker" zIndex="9"></g>
</svg>
</div>
I tried to style every element but it did not work. For example: I tried to set the height and width of the container #beteiligungs-chart to 500px - the inspector shows a box but the svg won't move.
Is there something i missed?
It would be awesome if someone could take a look at my problem :)
thanks!
Morten
Related
I'm learning SVG. This is my animated SVG:
#sky {
animation: skyColor 10s alternate infinite linear;
}
#keyframes skyColor {
0% {
fill: #000000;
}
30% {
fill: #000000;
}
40% {
fill: #303030;
}
50% {
fill: #fffade;
}
60% {
fill: #add1db;
}
100% {
fill: #dcf5fc;
}
}
#sun {
r: 10;
fill: yellow;
}
#bear {
transform: translate(50px, 50px);
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="600" height="400">
<defs>
<linearGradient id="snowHillGradient1" x1="0.25" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fdfdfd"/>
<stop offset="100%" stop-color="#e0e0e0"/>
</linearGradient>
<linearGradient id="snowHillGradient2" x1="0" x2="0.25" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d2d2d2"/>
</linearGradient>
<linearGradient id="snowHillGradient3" x1="0.5" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d6d6d6"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="200" id="sky"/>
<circle id="sun" cx="150" cy="220">
<animateMotion dur="20s" repeatCount="indefinite" path="m 0 0 a 1 1 0 0 1 0 -220 a 1 1 0 0 1 0 220" />
</circle>
<path id="moon" fill="#f7f7f7" d="M 0 0 a 9 9 0 1 0 3 15 c -13 2 -13 -14 -3 -15" >
<animateMotion dur="20s" repeatCount="indefinite" path="m 150 0 a 1 1 0 0 1 0 220 a 1 1 0 0 1 0 -220" />
</path>
<path fill="url(#snowHillGradient1)" stroke="#f0f0f0" stroke-width="0.25" d="M -20 68 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(3);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -60 85 l 212 0 c -81 -42 -191 -39 -212 0" style="transform: scale(2.2);" />
<path fill="url(#snowHillGradient3)" stroke="#eaeaea" stroke-width="0.25" d="M 4 85 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(2.5);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -44 85 l 212 0 c -81 -32 -183 -21 -212 0" style="transform: scale(2.5);" />
<svg width="100" height="100" id="bear">
<!-- Bear -->
<path stroke="black" stroke-width="1" fill="#543C23" d="m 35 60 l -20 20 l -4 10 l 0 5 l 78 0 l 0 -5 l -4 -10 l -20 -20 " />
<ellipse cx="50" cy="50" rx="30" ry="25" fill="#543C23" stroke="black" />
<ellipse cx="41" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="58" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="41" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="58" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="49" cy="58" rx="6" ry="4" fill="black" stroke="none" />
<line x1="49" y1="58" x2="49" y2="68" stroke="black" stroke-width="2" />
<polyline points="34,62 41,67 49,68 57,67 64,62" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 25 40 c -5 -10 0 -15 10 -10" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 75 40 c 5 -10 0 -15 -10 -10" />
<rect x="0" y="0" width="100%" height="100%" stroke="red" fill="none" />
</svg>
<rect x="0" y="0" width="300" height="200" stroke="black" fill="none" />
</svg>
I want to animate/style nested SVG (#bear id).
But even simple
#bear {
transform: translate(50px, 50px);
}
works only in FireFox! But in Chrome it has no effect.
How can I style/animate nested SVG in Chrome?
Maybe there is some other way to animate nested SVG?
Nested SVG is very convenient due to its own coordinate system.
An alternative to a nested <svg> could be <symbol>. A symbol element can also be handled separate to the rest. To show the symbol you then need to use <use> as well -- and that can then be styled (I changed the CSS selector to #usebear).
#sky {
animation: skyColor 10s alternate infinite linear;
}
#keyframes skyColor {
0% {
fill: #000000;
}
30% {
fill: #000000;
}
40% {
fill: #303030;
}
50% {
fill: #fffade;
}
60% {
fill: #add1db;
}
100% {
fill: #dcf5fc;
}
}
#sun {
r: 10;
fill: yellow;
}
#usebear {
transform: translate(50px, 50px);
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="600" height="400">
<defs>
<linearGradient id="snowHillGradient1" x1="0.25" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fdfdfd"/>
<stop offset="100%" stop-color="#e0e0e0"/>
</linearGradient>
<linearGradient id="snowHillGradient2" x1="0" x2="0.25" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d2d2d2"/>
</linearGradient>
<linearGradient id="snowHillGradient3" x1="0.5" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fcfcfc"/>
<stop offset="100%" stop-color="#d6d6d6"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="200" id="sky"/>
<circle id="sun" cx="150" cy="220">
<animateMotion dur="20s" repeatCount="indefinite" path="m 0 0 a 1 1 0 0 1 0 -220 a 1 1 0 0 1 0 220" />
</circle>
<path id="moon" fill="#f7f7f7" d="M 0 0 a 9 9 0 1 0 3 15 c -13 2 -13 -14 -3 -15" >
<animateMotion dur="20s" repeatCount="indefinite" path="m 150 0 a 1 1 0 0 1 0 220 a 1 1 0 0 1 0 -220" />
</path>
<path fill="url(#snowHillGradient1)" stroke="#f0f0f0" stroke-width="0.25" d="M -20 68 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(3);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -60 85 l 212 0 c -81 -42 -191 -39 -212 0" style="transform: scale(2.2);" />
<path fill="url(#snowHillGradient3)" stroke="#eaeaea" stroke-width="0.25" d="M 4 85 l 212 0 c -68 -50 -181 -29 -212 0" style="transform: scale(2.5);" />
<path fill="url(#snowHillGradient2)" stroke="#f0f0f0" stroke-width="0.25" d="M -44 85 l 212 0 c -81 -32 -183 -21 -212 0" style="transform: scale(2.5);" />
<symbol width="100" height="100" id="bear">
<!-- Bear -->
<path stroke="black" stroke-width="1" fill="#543C23" d="m 35 60 l -20 20 l -4 10 l 0 5 l 78 0 l 0 -5 l -4 -10 l -20 -20 " />
<ellipse cx="50" cy="50" rx="30" ry="25" fill="#543C23" stroke="black" />
<ellipse cx="41" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="58" cy="45" rx="7" ry="7" fill="white" stroke="black" />
<ellipse cx="41" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="58" cy="44" rx="3" ry="3" fill="black" stroke="none" />
<ellipse cx="49" cy="58" rx="6" ry="4" fill="black" stroke="none" />
<line x1="49" y1="58" x2="49" y2="68" stroke="black" stroke-width="2" />
<polyline points="34,62 41,67 49,68 57,67 64,62" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 25 40 c -5 -10 0 -15 10 -10" />
<path stroke="black" stroke-width="1" fill="#543C23" d="m 75 40 c 5 -10 0 -15 -10 -10" />
<rect x="0" y="0" width="100%" height="100%" stroke="red" fill="none" />
</symbol>
<use href="#bear" id="usebear"/>
<rect x="0" y="0" width="300" height="200" stroke="black" fill="none" />
</svg>
I want to have fixed dimensions for a marker icon width: 24px and height: 34px, but width and height don't work.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="background-size:24px 34px;" xml:space="preserve" width="24px" height="34px">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#B71C1C;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style>
<g id="Group_1_" transform="translate(7.000004, 5.000002)">
<path class="st0" d="M5,1.1c-2.9,0-5.2,2.3-5.2,5.2c0,2.3,1.3,3.9,2.4,5.2c0.3,0.4,0.6,0.7,0.8,1c0.6,0.8,0.8,1.5,0.9,1.9
C4.1,15,4.3,15.6,5,15.6s0.9-0.6,1.1-1.1s0.4-1.1,0.9-1.9c0.2-0.3,0.5-0.7,0.8-1c1.1-1.3,2.4-2.9,2.4-5.2C10.2,3.4,7.9,1.1,5,1.1z" />
<path class="st1" d="M5,1.6c-2.6,0-4.7,2.1-4.7,4.7c0,2.8,2,4.4,3.1,5.9C4.6,14,4.3,15,5,15s0.4-1.1,1.6-2.8
C7.7,10.7,9.7,9,9.7,6.3C9.7,3.7,7.6,1.6,5,1.6" />
<path class="st2" d="M5,4.5c1,0,1.8,0.8,1.8,1.8S6,8.1,5,8.1S3.2,7.3,3.2,6.3S4,4.5,5,4.5" />
</g>
</svg>
Cleaned up your SVG because you are stacking dimension settings on dimension settings
Up to you to play with viewBox, translate and width
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 180" width="120">
<rect width="100%" height="100%" fill="green" />
<g transform="translate(9, 5)">
<path fill="white"
d="m50 11c-29 0-52 23-52 52c0 23 13 39 24 52c3 4 6 7 8 10c6 8 8 15 9 19c2 6 4 12 11 12s9-6 11-11s4-11 9-19c2-3 5-7 8-10c11-13 24-29 24-52c0-30-23-53-52-53z" />
<path fill="#B71C1C"
d="m50 16c-26 0-47 21-47 47c0 28 20 44 31 59c12 18 9 28 16 28s4-11 16-28c11-15 31-32 31-59c0-26-21-47-47-47" />
<path fill="white" d="m50 45c10 0 18 8 18 18s-8 18-18 18s-18-8-18-18s8-18 18-18" />
</g>
</svg>
d= paths were multiplied by 10 in https://yqnn.github.io/svg-path-editor
That multiplied the viewBox by 10 and got rid of all decimals
Then I resized the viewBox
Your original had a translate(7,5) but it needed an extra shift to-the-right to align in the green rectangle.
Simplified:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 180" width="120">
<rect width="100%" height="100%" fill="green" />
<path fill="#B71C1C" stroke="white" stroke-width="5"
d="m60 16c-29 0-52 23-52 52c0 23 13 39 24 52c3 4 6 7 8 10c6 8 8 15 9 19c2 6 4 12 11 12s9-6 11-11s4-11 9-19c2-3 5-7 8-10c11-13 24-29 24-52c0-30-23-53-52-53z" />
<circle cx="50%" cy="63" r="18" fill="white" />
</svg>
It's my first time working with SVG. I set the artboard to a specific size 60 x 70 px or something close to that but when I load in the browser its huge
.st6 {
fill: none;
stroke: #4d4d4d;
stroke-miterlimit: 10
}
<nav>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 60 70" xml:space="preserve">
<path d="M54.49 70H5.51C2.47 70 0 67.53 0 64.49V5.51C0 2.47 2.47 0 5.51 0h48.98C57.53 0 60 2.47 60 5.51v58.98c0 3.04-2.47 5.51-5.51 5.51z" fill="gray" stroke="#4d4d4d" stroke-miterlimit="10"/>
<path d="M52.44 66H7.56C5.59 66 4 64.41 4 62.44V7.56C4 5.59 5.59 4 7.56 4h44.88C54.41 4 56 5.59 56 7.56v54.88c0 1.97-1.59 3.56-3.56 3.56z" fill="none" stroke="#00f" stroke-width="2" stroke-miterlimit="10"/>
<text transform="translate(11.528 19.33)" font-size="16" font-family="MyriadPro-Regular" fill="#fff">
News
</text>
<path fill="none" stroke="gray" stroke-miterlimit="10" d="M30 65V46"/>
<path class="st6" d="M5.5 46.5h49M30.5 64.5v-18"/>
</svg>
</nav>
Youn just need to set a width / height on your svg
svg {
width: 60px;
height: 70px;
}
<nav>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 60 70" xml:space="preserve">
<style>
.st6{fill:none;stroke:#4d4d4d;stroke-miterlimit:10}
</style>
<path d="M54.49 70H5.51C2.47 70 0 67.53 0 64.49V5.51C0 2.47 2.47 0 5.51 0h48.98C57.53 0 60 2.47 60 5.51v58.98c0 3.04-2.47 5.51-5.51 5.51z" fill="gray" stroke="#4d4d4d" stroke-miterlimit="10"/>
<path d="M52.44 66H7.56C5.59 66 4 64.41 4 62.44V7.56C4 5.59 5.59 4 7.56 4h44.88C54.41 4 56 5.59 56 7.56v54.88c0 1.97-1.59 3.56-3.56 3.56z" fill="none" stroke="#00f" stroke-width="2" stroke-miterlimit="10"/>
<text transform="translate(11.528 19.33)" font-size="16" font-family="MyriadPro-Regular" fill="#fff">
News
</text>
<path fill="none" stroke="gray" stroke-miterlimit="10" d="M30 65V46"/>
<path class="st6" d="M5.5 46.5h49M30.5 64.5v-18"/>
</svg>
</nav>
So even though you may of set the artboard in photoshop / illustrator as 60 x 70 - when it generates the SVG it doesnt actually set the width or height. So if you don't specify its size it will take up all the available space.
I have an SVG image map with hover styles on the links.
(More on SVG image maps here.)
All respectable browsers I've tested on are displaying it correctly.
IE is not having any of it (surprise!)...
(I'm only concerned with IE11, not super-archaic versions.)
Thanks to this answer to a similar question, I know that IE can display clipping paths as long as they are part of the SVG markup and not added with CSS styling.
In my case, since it's an image map, the clipping paths are inside anchor tags. Maybe this is why IE is confused, but I haven't read anywhere that it isn't supported.
Here is what I have (confirmed working in Firefox, Chrome, Safari, Opera):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; margin: auto;">
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
<defs>
<filter id="desaturate">
<feColorMatrix
type='matrix'
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 1 0 1 0 "
/>
</filter>
<style type="text/css">
a:link,
a:visited {
opacity: 0;
}
a:hover,
a:active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
.desaturated {
filter:url("#desaturate");
}
</style>
<clipPath id="clip-path">
<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
</clipPath>
<clipPath id="clip-path-2">
<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
</clipPath>
<clipPath id="clip-path-3">
<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
</clipPath>
<clipPath id="clip-path-4">
<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
</clipPath>
<clipPath id="clip-path-5">
<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
</clipPath>
<clipPath id="clip-path-6">
<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
</clipPath>
<clipPath id="clip-path-7">
<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
</clipPath>
<clipPath id="clip-path-8">
<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
</clipPath>
<clipPath id="clip-path-9">
<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
</clipPath>
<clipPath id="clip-path-10">
<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
</clipPath>
<clipPath id="clip-path-11">
<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
</clipPath>
<clipPath id="clip-path-12">
<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
</clipPath>
<image id="image" width="960" height="640" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</defs>
<image id="bw_img" class="desaturated" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
<a xlink:href="">
<g id="_1-2" data-name="1">
<g clip-path="url(#clip-path)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_2-2" data-name="2">
<g clip-path="url(#clip-path-2)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_3-2" data-name="3">
<g clip-path="url(#clip-path-3)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_4-2" data-name="4">
<g clip-path="url(#clip-path-4)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_5-2" data-name="5">
<g clip-path="url(#clip-path-5)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_6-2" data-name="6">
<g clip-path="url(#clip-path-6)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_7-2" data-name="7">
<g clip-path="url(#clip-path-7)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_8-2" data-name="8">
<g clip-path="url(#clip-path-8)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_9-2" data-name="9">
<g clip-path="url(#clip-path-9)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_10-2" data-name="10">
<g clip-path="url(#clip-path-10)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_11-2" data-name="11">
<g clip-path="url(#clip-path-11)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href="">
<g id="_12-2" data-name="12">
<g clip-path="url(#clip-path-12)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
</svg>
</div>
</body>
</html>
If you run the code snippet in the aforementioned non-IE browsers, you should see the colors of the pencils appear upon hovering.
Image credit: Pixabay
Can something be done differently to get IE to recognize the clip-path links?
Update:
I've made some progress. I got a separate test file working in IE11!
Now I just have to figure out what the difference is that makes or breaks it.
Below is a code snippet with (1) a polygon path, (2) a polygon path that is a link, and (3) a polygon clip-path that is a link:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width: 512px; height: 512px; margin: 20px auto;">
<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<defs>
<clipPath id="clip-path">
<polygon id="hexa3" points="316 256 196 256 136 360 196 464 316 464 376 360 316 256" fill="none"/>
</clipPath>
</defs>
<rect id="bg" width="512" height="512" fill="#b9b8c1"/>
<a xlink:href="#">
<g id="clip_group">
<g clip-path="url(#clip-path)">
<image id="img" width="960" height="640" transform="translate(24 204) scale(0.48 0.48)" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="hexa2">
<polygon points="436 48 316 48 256 152 316 256 436 256 496 152 436 48" fill="#c4fffb"/>
</g>
</a>
<g id="hexa1">
<polygon points="196 48 76 48 16 152 76 256 196 256 256 152 196 48" fill="#eaffaf"/>
</g>
</svg>
</div>
</body>
</html>
Update 2
I've narrowed down the problem to IE not liking my CSS.
Here is a snippet where the links on clip-paths are working but the CSS is commented out. As soon as the CSS is re-enabled it breaks. (The background image has been removed in this one for the sake of simplicity.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; height: 320px; margin: 20px auto;">
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
<defs>
<!-- <style type="text/css">
a:link,
a:visited {
opacity: 0;
}
a:hover,
a:active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
</style> -->
<clipPath id="clip-path">
<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
</clipPath>
<clipPath id="clip-path-2">
<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
</clipPath>
<clipPath id="clip-path-3">
<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
</clipPath>
<clipPath id="clip-path-4">
<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
</clipPath>
<clipPath id="clip-path-5">
<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
</clipPath>
<clipPath id="clip-path-6">
<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
</clipPath>
<clipPath id="clip-path-7">
<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
</clipPath>
<clipPath id="clip-path-8">
<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
</clipPath>
<clipPath id="clip-path-9">
<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
</clipPath>
<clipPath id="clip-path-10">
<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
</clipPath>
<clipPath id="clip-path-11">
<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
</clipPath>
<clipPath id="clip-path-12">
<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
</clipPath>
<image id="image" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</defs>
<!-- <use id="bw_img" xlink:href="#image"/> -->
<a xlink:href="#">
<g id="clip_1">
<g clip-path="url(#clip-path)">
<use id="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_2">
<g clip-path="url(#clip-path-2)">
<use id="color_img-2" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_3">
<g clip-path="url(#clip-path-3)">
<use id="color_img-3" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_4">
<g clip-path="url(#clip-path-4)">
<use id="color_img-4" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_5">
<g clip-path="url(#clip-path-5)">
<use id="color_img-5" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_6">
<g clip-path="url(#clip-path-6)">
<use id="color_img-6" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_7">
<g clip-path="url(#clip-path-7)">
<use id="color_img-7" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_8">
<g clip-path="url(#clip-path-8)">
<use id="color_img-8" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_9">
<g clip-path="url(#clip-path-9)">
<use id="color_img-9" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_10">
<g clip-path="url(#clip-path-10)">
<use id="color_img-10" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_11">
<g clip-path="url(#clip-path-11)">
<use id="color_img-11" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
<a xlink:href="#">
<g id="clip_12">
<g clip-path="url(#clip-path-12)">
<use id="color_img-12" data-name="color_img" xlink:href="#image"/>
</g>
</g>
</a>
</svg>
</div>
</body>
</html>
So now I am wondering if maybe it's because of where I've placed the CSS, or maybe certain kinds of CSS are unrecognized by IE when inside an SVG. The testing continues...
At this point I think it's more appropriate to change the title of this question from
Getting Internet Explorer to recognize clip-path links inside SVG
to
Internet Explorer not recognizing CSS for SVG elements
Also, IE apparently has "full basic support" for <style> inside of <svg> since version 9, according to this page. So I'm really wondering what it hates about my CSS. a:hover isn't a particularly exotic selector...
Adding /* <![CDATA[ */ (as is shown in that example) hasn't fixed the problem either.
Here are two examples of CSS :hover implementation that work in IE11:
Stack Overflow: SVG CSS Hover Styling
CodePen: CSS SVG hover color*
*CodePen doesn't support IE, but that hover styling works if prepared in an HTML file.
The answer is...
For opacity transitions in an SVG, IE needs an opacity greater than zero!
a.hover_area:link, a.hover_area:visited {opacity: 0.001}
Otherwise it just throws it out, like "heyyyyy, won't be needing this invisible thing!" despite having been told to expect a transition: transition-property: opacity;
Here's a snippet, working in IE11:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; height: 640px; margin: 20px auto;"> <!-- IE needs width AND height specified to scale the SVG inside correctly. -->
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
<filter id="desaturate">
<feColorMatrix
type='matrix'
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 1 0 1 0 "
/>
</filter>
<style type="text/css">
/* <![CDATA[ */
a.hover_area:link,
a.hover_area:visited {
opacity: 0.001; /* Must be greater than 0 for IE! */
}
a.hover_area:hover,
a.hover_area:active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
.desaturated {
filter:url("#desaturate");
}
/* ]]> */
</style>
<defs>
<clipPath id="clip-path">
<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
</clipPath>
<clipPath id="clip-path-2">
<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
</clipPath>
<clipPath id="clip-path-3">
<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
</clipPath>
<clipPath id="clip-path-4">
<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
</clipPath>
<clipPath id="clip-path-5">
<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
</clipPath>
<clipPath id="clip-path-6">
<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
</clipPath>
<clipPath id="clip-path-7">
<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
</clipPath>
<clipPath id="clip-path-8">
<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
</clipPath>
<clipPath id="clip-path-9">
<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
</clipPath>
<clipPath id="clip-path-10">
<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
</clipPath>
<clipPath id="clip-path-11">
<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
</clipPath>
<clipPath id="clip-path-12">
<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
</clipPath>
<image id="image" width="960" height="640" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</defs>
<image id="bw_img" class="desaturated" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
<a xlink:href="#" class="hover_area">
<g id="_1-2" data-name="1">
<g clip-path="url(#clip-path)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_2-2" data-name="2">
<g clip-path="url(#clip-path-2)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_3-2" data-name="3">
<g clip-path="url(#clip-path-3)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_4-2" data-name="4">
<g clip-path="url(#clip-path-4)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_5-2" data-name="5">
<g clip-path="url(#clip-path-5)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_6-2" data-name="6">
<g clip-path="url(#clip-path-6)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_7-2" data-name="7">
<g clip-path="url(#clip-path-7)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_8-2" data-name="8">
<g clip-path="url(#clip-path-8)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_9-2" data-name="9">
<g clip-path="url(#clip-path-9)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_10-2" data-name="10">
<g clip-path="url(#clip-path-10)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_11-2" data-name="11">
<g clip-path="url(#clip-path-11)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href="#" class="hover_area">
<g id="_12-2" data-name="12">
<g clip-path="url(#clip-path-12)">
<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
</svg>
</div>
</body>
</html>
I am working on producing an animated codewars logo. It looks good enough for my project: https://codepen.io/forTheLoveOfCode/pen/GOERRE
However, the following block of code surely can be re-written without copying and pasting the same line. Yet, neither my research, nor attempts to guess where "transform=rotate" can be put in SVG pattern got me any results. Any ideas how could I have achieved the same result with fewer lines?
<svg class="codewars" width="300" height="300">
<path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"/>
<path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(60, 150, 150)"/>
<path d="M148 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(120, 150, 150)"/>
<path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(180, 150, 150)"/>
<path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(240, 150, 150)"/>
<path d="M148 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(300, 150, 150)"/>
You've gone down the wrong path, <use> is what you want, not a pattern.
.codewars{
stroke:red;
stroke-dasharray: 0.1em;
}
<svg class="codewars" width="320" height="320">
<defs>
<path id="curve" d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"/>
</defs>
<use href="#curve"/>
<use href="#curve" transform="rotate(60, 150, 150)"/>
<use href="#curve" transform="rotate(120, 150, 150)"/>
<use href="#curve" transform="rotate(180, 150, 150)"/>
<use href="#curve" transform="rotate(240, 150, 150)"/>
<use href="#curve" transform="rotate(300, 150, 150)"/>
</svg>