Clipped SVG path rendering issue in Chrome only when stroke width uses 2px to render - google-chrome
Context:
I am rendering a line chart with a curved path.
The path extends beyond the clipped rect mask / viewbox as I had to animate a zooming effect to a smaller range on the x axis. As such the path is quite large.
Issue:
The "zoomed in" path renders with a broken stroke (see image B).
Issue only happens when:
in Chrome, Mac.
more than 2 pixels required to render the path (if the stroke is thin enough requiring only one pixel to render the stroke appears fine - (see image A) I was able to find this out when moving the window from my low resolution monitor over to my retina display. You can also notice the issue when zooming into the path.
When the path is large AND "scaled in / only showing a small section within the viewbox". If some of the plots beyond the viewbox area are removed then the path renders correctly.
Other browsers tested: Safari, Firefox. (Mac) These browsers render the path correctly.
Has anyone come across this issue and know of any fixes?
I have tried, using a thin stroke and adding drop-shadow filter which helps on low res screens but still breaks on zoom or some monitors with different resolution settings. Shadow only does not work as it requires a stroke to apply the effect.
Here is the codepen:
https://codepen.io/althea16/pen/yLxLRBP
<svg viewBox="0 0 536 383" width="536" height="383"
xmlns="http://www.w3.org/2000/svg">
<g class="wrapper" transform="translate(40,20)">
<g class="axis x" transform="translate(0,343)" fill="none" font-size="10" font-family="sans-serif"
text-anchor="middle">
<path class="domain text-divider" stroke="currentColor" d="M0,6V0H436.00848388671875V6"></path>
<g class="tick text-secondary" opacity="1" transform="translate(22, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9"
dy="0.71em">08:45</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(133, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9" dy="0.71em">09
AM</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(244, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9"
dy="0.71em">09:15</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(355, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9"
dy="0.71em">09:30</text>
</g>
</g>
<g class="axis y" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<path class="domain text-divider" stroke="currentColor" d="M-6,343.9985656738281H0V0H-6"></path>
<g class="tick text-secondary" opacity="1" transform="translate(0, 330)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.1</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 283)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.2</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 237)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.3</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 191)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.4</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 145)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.5</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 98)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.6</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 52)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.7</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 6)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.8</text>
</g>
</g>
<defs>
<clipPath id="clip">
<rect width="440" height="345" transform="translate(0, -1)"></rect>
</clipPath>
</defs>
<g class="lines" stroke="red" stroke-effect="non-scaling-stroke" stroke-width="2" clip-path="url(#clip)">
<path
d="M-3877882,7311C-3874338,7311,-3870794,7311,-3867250,7311C-3863706,7311,-3860162,7311,-3856618,7311C-3853074,7311,-3849530,7311,-3845986,7311C-3842442,7311,-3838898,7311,-3835354,7311C-3831810,7311,-3828266,7311,-3824722,7311C-3821178,7311,-3817634,7311,-3814090,7311C-3810546,7311,-3807002,7311,-3803458,7311C-3799914,7311,-3796370,7311,-3792826,7311C-3789281.9999999995,7311,-3785737.9999999995,7311,-3782193.9999999995,7311C-3778649.9999999995,7311,-3775105.9999999995,7311,-3771561.9999999995,7311C-3768017.9999999995,7311,-3764473.9999999995,7311,-3760929.9999999995,7311C-3757385.9999999995,7311,-3753841.9999999995,7311,-3750297.9999999995,7311C-3746753.9999999995,7311,-3743209.9999999995,7311,-3739666,7311C-3736122,7311,-3732578,7311,-3729034,7311C-3725490,7311,-3721946,7311,-3718402,7311C-3714858,7311,-3711314,7311,-3707770,7311C-3704226,7311,-3700682,7311,-3697138,7311C-3693594,7311,-3690050,7311,-3686506,7311C-3682962,7311,-3679418,7311,-3675874,7311C-3672330,7311,-3668786,7311,-3665242,7311C-3661698,7311,-3658154,7311,-3654610,7311C-3651066,7311,-3647522,7311,-3643978,7311C-3640434,7311,-3636890,7311,-3633346,7311C-3629802,7311,-3626258,7311,-3622714,7311C-3619170,7311,-3615626,7311,-3612082,7311C-3608538,7311,-3604994,7311,-3601450,7311C-3597906,7311,-3594362,7311,-3590818,7311C-3587274,7311,-3583730,7311,-3580186,7311C-3576642,7311,-3573098,7311,-3569554,7311C-3566010,7311,-3562466,7311,-3558922,7311C-3555378,7311,-3551834,7311,-3548290,7311C-3544746,7311,-3541202,7311,-3537657.9999999995,7311C-3534113.9999999995,7311,-3530569.9999999995,7311,-3527025.9999999995,7311C-3523481.9999999995,7311,-3519937.9999999995,7311,-3516393.9999999995,7311C-3512849.9999999995,7311,-3509305.9999999995,7311,-3505761.9999999995,7311C-3502217.9999999995,7311,-3498673.9999999995,7311,-3495130,7311C-3491586,7311,-3488042,7311,-3484498,7311C-3480954,7311,-3477410,7311,-3473866,7311C-3470322,7311,-3466778,7311,-3463234,7311C-3459690,7311,-3456146,7311,-3452602,7311C-3449058,7311,-3445514,7311,-3441970,7311C-3438426,7311,-3434882,7311,-3431338,7311C-3427794,7311,-3424250,7311,-3420706,7311C-3417162,7311,-3413618,7311,-3410074,7311C-3406530,7311,-3402986,7311,-3399442,7311C-3395898,7311,-3392354,7311,-3388810,7311C-3385266,7311,-3381722,7311,-3378178,7311C-3374634,7311,-3371090,7311,-3367546,7311C-3364002,7311,-3360458,7311,-3356914,7311C-3353370,7311,-3349826,7311,-3346282,7311C-3342738,7311,-3339194,7311,-3335650,7311C-3332106,7311,-3328562,7311,-3325018,7311C-3321474,7311,-3317930,7311,-3314386,7311C-3310842,7311,-3307298,7311,-3303754,7311C-3300210,7311,-3296666,7311,-3293122,7311C-3289578,7311,-3286033.9999999995,7311,-3282489.9999999995,7311C-3278945.9999999995,7311,-3275401.9999999995,7311,-3271857.9999999995,7311C-3268313.9999999995,7311,-3264769.9999999995,7311,-3261225.9999999995,7311C-3257681.9999999995,7311,-3254137.9999999995,7311,-3250593.9999999995,7311C-3247049.9999999995,7311,-3243505.9999999995,7311,-3239961.9999999995,7311C-3236417.9999999995,7311,-3232873.9999999995,7311,-3229329.9999999995,7311C-3225785.9999999995,7311,-3222241.9999999995,7311,-3218698,7311C-3215154,7311,-3211610,7311,-3208066,7311C-3204522,7311,-3200978,7311,-3197434,7311C-3193890,7311,-3190346,7311,-3186802,7311C-3183258,7311,-3179714,7311,-3176170,7311C-3172626,7311,-3169082,7311,-3165538,7311C-3161994,7311,-3158450,7311,-3154906,7311C-3151362,7311,-3147818,7311,-3144274,7311C-3140730,7311,-3137186,7311,-3133642,7311C-3130098,7311,-3126554,7311,-3123010,7311C-3119466,7311,-3115922,7311,-3112378,7311C-3108834,7311,-3105290,7311,-3101746,7311C-3098202,7311,-3094658,7311,-3091114,7311C-3087570,7311,-3084026,7311,-3080482,7311C-3076938,7311,-3073394,7311,-3069850,7311C-3066306,7311,-3062762,7311,-3059218,7311C-3055674,7311,-3052130,7311,-3048586,7311C-3045042,7311,-3041498,7311,-3037954,7311C-3034410,7311,-3030866,7311,-3027322,7311C-3023778,7311,-3020234,7311,-3016690,7311C-3013146,7311,-3009602,7311,-3006058,7311C-3002514,7311,-2998970,7311,-2995426,7311C-2991882,7311,-2988338,7311,-2984794,7311C-2981250,7311,-2977706,7311,-2974162,7311C-2970618,7311,-2967074,7311,-2963530,7311C-2959986,7311,-2956442,7311,-2952898,7311C-2949354,7311,-2945810,7311,-2942266,7311C-2938722,7311,-2935178,7311,-2931634,7311C-2928090,7311,-2924546,7311,-2921002,7311C-2917458,7311,-2913914,7311,-2910370,7311C-2906826,7311,-2903282,7311,-2899738,7311C-2896194,7311,-2892650,7311,-2889106,7311C-2885562,7311,-2882018,7311,-2878474,7311C-2874930,7311,-2871386,7311,-2867842,7311C-2864298,7311,-2860754,7311,-2857210,7311C-2853666,7311,-2850122,7311,-2846578,7311C-2843034,7311,-2839490,7311,-2835946,7311C-2832402,7311,-2828858,7311,-2825314,7311C-2821770,7311,-2818226,7311,-2814682,7311C-2811138,7311,-2807594,7311,-2804050,7311C-2800506,7311,-2796962,7311,-2793418,7311C-2789874,7311,-2786330,7311,-2782786,7311C-2779242,7311,-2775698,7311,-2772154,7311C-2768610,7311,-2765066,7311,-2761522,7311C-2757978,7311,-2754434,7311,-2750890,7311C-2747346,7311,-2743802,7311,-2740258,7311C-2736714,7311,-2733170,7311,-2729626,7311C-2726082,7311,-2722538,7311,-2718994,7311C-2715450,7311,-2711906,7311,-2708362,7311C-2704818,7311,-2701274,7311,-2697730,7311C-2694186,7311,-2690642,7311,-2687098,7311C-2683554,7311,-2680010,7311,-2676466,7311C-2672922,7311,-2669378,7311,-2665834,7311C-2662290,7311,-2658746,7311,-2655202,7311C-2651658,7311,-2648114,7311,-2644570,7311C-2641026,7311,-2637482,7311,-2633938,7311C-2630394,7311,-2626850,7311,-2623306,7311C-2619762,7311,-2616218,7311,-2612674,7311C-2609130,7311,-2605586,7311,-2602042,7311C-2598498,7311,-2594954,7311,-2591410,7311C-2587866,7311,-2584322,9332,-2580778,9332C-2577234,9332,-2573690,6012.999999999999,-2570146,5949C-2566602,5885,-2563058,5917,-2559514,5853C-2555970,5789,-2552426,3225,-2548882,3225C-2545338,3225,-2541794,5772,-2538250,5772C-2534706,5772,-2531162,3889.5,-2527618,2989C-2524074,2088.5,-2520530,985.6666666666666,-2516986,369C-2513442,-247.66666666666663,-2509898,-711,-2506354,-711C-2502810,-711,-2499266,263.33333333333337,-2495722,552C-2492178,840.6666666666665,-2488634,708.3333333333333,-2485090,1020.9999999999999C-2481546,1333.6666666666667,-2478002,3737,-2474458,3881C-2470914,4025,-2467370,3987,-2463826,4097C-2460282,4207,-2456738,4277,-2453194,4541C-2449650,4805,-2446106,5681,-2442562,5681C-2439018,5681,-2435474,5474.333333333332,-2431930,5394C-2428386,5313.666666666667,-2424842,5329,-2421298,5199C-2417754,5069,-2414210,3075,-2410666,3075C-2407122,3075,-2403578,3980,-2400034,3980C-2396490,3980,-2392946,3377.833333333333,-2389402,2854C-2385858,2330.1666666666665,-2382314,837,-2378770,837C-2375226,837,-2371682,1414,-2368138,1414C-2364594,1414,-2361050,841,-2357506,841C-2353962,841,-2350418,1826.8333333333335,-2346874,2619C-2343330,3411.1666666666665,-2339786,4864.833333333333,-2336242,5594C-2332698,6323.166666666666,-2329154,6994,-2325610,6994C-2322066,6994,-2318522,5326.166666666667,-2314978,4744C-2311434,4161.833333333333,-2307890,3800.166666666666,-2304346,3500.9999999999995C-2300802,3201.833333333333,-2297258,3317,-2293714,2949C-2290170,2581,-2286626,982,-2283082,982C-2279538,982,-2275994,1984,-2272450,1984C-2268906,1984,-2265362,-2244.6666666666665,-2261818,-2944C-2258274,-3643.333333333333,-2254730,-3992.9999999999995,-2251186,-3992.9999999999995C-2247642,-3992.9999999999995,-2244098,-2769,-2240554,-2769C-2237010,-2769,-2233466,-3447,-2229922,-3447C-2226378,-3447,-2222834,-1810,-2219290,-1810C-2215746,-1810,-2212202,-1996.6666666666667,-2208658,-2106C-2205114,-2215.3333333333335,-2201570,-2466,-2198026,-2466C-2194482,-2466,-2190938,1603,-2187394,1603C-2183850,1603,-2180306,1571.6666666666667,-2176762,1509C-2173218,1446.333333333333,-2169674,-1575.6666666666665,-2166130,-2576C-2162586,-3576.333333333333,-2159042,-4493,-2155498,-4493C-2151954,-4493,-2148410,-4178,-2144866,-4178C-2141322,-4178,-2137778,-5005,-2134234,-5005C-2130690,-5005,-2127146,-4076.333333333333,-2123602,-3923C-2120058,-3769.666666666666,-2116514,-3846.333333333333,-2112970,-3693C-2109426,-3539.666666666666,-2105882,-2787.333333333333,-2102338,-2596C-2098794,-2404.6666666666665,-2095250,-2309,-2091706,-2309C-2088162,-2309,-2084617.9999999998,-2321.666666666666,-2081073.9999999998,-2347C-2077529.9999999998,-2372.333333333333,-2073985.9999999998,-4339,-2070441.9999999998,-4339C-2066897.9999999998,-4339,-2063353.9999999998,-3494,-2059809.9999999998,-3494C-2056266,-3494,-2052722,-3680.6666666666665,-2049178,-4006C-2045634,-4331.333333333333,-2042090,-5446,-2038546,-5446C-2035002,-5446,-2031458,-3705.9999999999995,-2027914,-3705.9999999999995C-2024370,-3705.9999999999995,-2020826,-6174,-2017282,-6174C-2013738,-6174,-2010194,-6165,-2006650,-6165C-2003106,-6165,-1999562,-7385.333333333332,-1996018,-7747C-1992474,-8108.666666666666,-1988930,-7942.999999999999,-1985386,-8335C-1981842,-8727,-1978298,-11704,-1974754,-11704C-1971210,-11704,-1967666,-9294,-1964122,-9294C-1960577.9999999998,-9294,-1957033.9999999998,-10520,-1953489.9999999998,-10520C-1949945.9999999998,-10520,-1946401.9999999998,-8857.5,-1942857.9999999998,-8099.999999999999C-1939313.9999999998,-7342.5,-1935769.9999999998,-7154.666666666667,-1932226,-5975C-1928682,-4795.333333333333,-1925138,-1123.3333333333333,-1921594,-1021.9999999999999C-1918050,-920.6666666666665,-1914506,-870,-1910962,-870C-1907418,-870,-1903874,-2114,-1900330,-2114C-1896786,-2114,-1893242,-1568.9999999999998,-1889698,-1568.9999999999998C-1886154,-1568.9999999999998,-1882610,-2135,-1879066,-2135C-1875522,-2135,-1871978,-1491,-1868434,-1491C-1864890,-1491,-1861346,-2678,-1857802,-2678C-1854258,-2678,-1850714,1364,-1847170,1520C-1843626,1676,-1840082,1597.9999999999998,-1836538,1754C-1832993.9999999998,1910,-1829449.9999999998,3352,-1825905.9999999998,3352C-1822361.9999999998,3352,-1818817.9999999998,952,-1815273.9999999998,952C-1811730,952,-1808186,1938.9999999999998,-1804642,1938.9999999999998C-1801098,1938.9999999999998,-1797554,1918.333333333333,-1794010,1876.9999999999998C-1790466,1835.6666666666665,-1786922,1195,-1783378,1195C-1779834,1195,-1776290,1580.9999999999998,-1772746,1580.9999999999998C-1769202,1580.9999999999998,-1765658,1469.6666666666667,-1762114,1247C-1758570,1024.3333333333333,-1755026,164,-1751482,164C-1747938,164,-1744394,185,-1740850,227C-1737306,269,-1733762,2544,-1730218,2544C-1726674,2544,-1723130,1005,-1719586,841C-1716042,677,-1712498,759,-1708954,595C-1705409.9999999998,431,-1701865.9999999998,-1429.8333333333333,-1698321.9999999998,-2012.9999999999998C-1694777.9999999998,-2596.166666666667,-1691233.9999999998,-2904,-1687690,-2904C-1684146,-2904,-1680602,-2566,-1677058,-2566C-1673514,-2566,-1669970,-2832,-1666426,-2832C-1662882,-2832,-1659338,1308,-1655794,1308C-1652250,1308,-1648706,162,-1645162,162C-1641618,162,-1638074,2450,-1634530,2450C-1630986,2450,-1627442,2320.6666666666665,-1623898,2062C-1620354,1803.3333333333335,-1616810,589,-1613266,589C-1609722,589,-1606178,4182,-1602634,4182C-1599090,4182,-1595546,2707,-1592002,2707C-1588458,2707,-1584914,3032.666666666666,-1581369.9999999998,3357.9999999999995C-1577825.9999999998,3683.3333333333335,-1574281.9999999998,4659,-1570737.9999999998,4659C-1567193.9999999998,4659,-1563649.9999999998,1938.333333333333,-1560105.9999999998,1163C-1556561.9999999998,387.66666666666674,-1553017.9999999998,0,-1549474,0C-1545930,0,-1542386,353.33333333333337,-1538842,565C-1535298,776.6666666666666,-1531754,1270,-1528210,1270C-1524666,1270,-1521122,989,-1517578,989C-1514034,989,-1510490,1842,-1506946,1842C-1503402,1842,-1499858,1765.333333333333,-1496314,1612C-1492770,1458.6666666666667,-1489226,663,-1485682,663C-1482138,663,-1478594,714.3333333333334,-1475050,817C-1471506,919.6666666666665,-1467962,1138.5,-1464418,1451C-1460874,1763.5,-1457330,2692,-1453786,2692C-1450242,2692,-1446698,2032.1666666666667,-1443154,1516C-1439610,999.8333333333331,-1436066,-405,-1432522,-405C-1428978,-405,-1425434,-291.3333333333333,-1421890,-180C-1418346,-68.66666666666667,-1414802,196.33333333333331,-1411258,263C-1407714,329.66666666666663,-1404170,296.3333333333333,-1400626,363C-1397082,429.66666666666663,-1393538,730,-1389994,730C-1386450,730,-1382906,264,-1379362,264C-1375818,264,-1372274,2222.333333333333,-1368730,2525C-1365186,2827.666666666666,-1361642,2979,-1358098,2979C-1354554,2979,-1351010,2975,-1347466,2975C-1343922,2975,-1340378,3069.166666666666,-1336834,3147C-1333290,3224.833333333333,-1329746,3331.8333333333335,-1326202,3442C-1322658,3552.166666666666,-1319114,3808,-1315570,3808C-1312026,3808,-1308482,3601.666666666666,-1304938,3419C-1301394,3236.333333333333,-1297850,2712,-1294306,2712C-1290762,2712,-1287218,3307.8333333333335,-1283674,3664C-1280130,4020.166666666666,-1276586,4661,-1273042,4849C-1269498,5037,-1265954,5131,-1262410,5131C-1258866,5131,-1255322,4663.833333333333,-1251778,4529C-1248234,4394.166666666666,-1244690,4460,-1241146,4322C-1237602,4184,-1234058,3361,-1230514,3361C-1226970,3361,-1223426,4312,-1219882,4312C-1216338,4312,-1212794,2624.1666666666665,-1209250,1781C-1205706,937.8333333333333,-1202162,-747,-1198618,-747C-1195074,-747,-1191530,-87,-1187986,-87C-1184442,-87,-1180898,-1254,-1177354,-2568C-1173810,-3882,-1170266,-7970.999999999999,-1166722,-7970.999999999999C-1163178,-7970.999999999999,-1159634,-6260,-1156090,-6260C-1152546,-6260,-1149002,-6949.666666666667,-1145458,-7436.999999999999C-1141914,-7924.333333333332,-1138370,-9184,-1134826,-9184C-1131282,-9184,-1127738,-6041,-1124194,-5835C-1120650,-5629,-1117106,-5526,-1113562,-5526C-1110018,-5526,-1106474,-9113.333333333334,-1102930,-9194C-1099386,-9274.666666666666,-1095842,-9315,-1092298,-9315C-1088754,-9315,-1085210,-6710.333333333332,-1081666,-5971C-1078122,-5231.666666666666,-1074578,-5601.333333333333,-1071034,-4862C-1067490,-4122.666666666667,-1063946,192,-1060402,2893C-1056858,5594,-1053314,11344,-1049770,11344C-1046226,11344,-1042681.9999999999,4802,-1039137.9999999999,4802C-1035593.9999999999,4802,-1032049.9999999999,5863.333333333333,-1028506,6277C-1024962,6690.666666666666,-1021418,6810,-1017874,7284C-1014330,7758,-1010786,9121,-1007242,9121C-1003698,9121,-1000154,8240.833333333334,-996610,7929C-993066,7617.166666666667,-989522,7249.999999999999,-985978,7249.999999999999C-982433.9999999999,7249.999999999999,-978889.9999999999,7864.666666666666,-975345.9999999999,8048C-971801.9999999999,8231.333333333334,-968258,8350,-964714,8350C-961170,8350,-957626,8312,-954082,8304C-950538,8296,-946994,8292,-943450,8292C-939906,8292,-936362,10013.5,-932818,10545C-929274,11076.5,-925730,11481,-922186,11481C-918641.9999999999,11481,-915097.9999999999,10545.666666666666,-911553.9999999999,10080C-908009.9999999999,9614.333333333334,-904466,8967,-900922,8687C-897378,8407,-893834,8483.666666666666,-890290,8267C-886746,8050.333333333332,-883202,7387,-879658,7387C-876114,7387,-872570,7745,-869026,7745C-865482,7745,-861938,6658,-858394,6658C-854849.9999999999,6658,-851305.9999999999,7709,-847761.9999999999,7709C-844218,7709,-840674,7027.666666666667,-837130,6530C-833586,6032.333333333332,-830042,4723,-826498,4723C-822954,4723,-819410,5853,-815866,5853C-812322,5853,-808778,5534,-805234,5534C-801690,5534,-798146,6439,-794602,6439C-791057.9999999999,6439,-787513.9999999999,5455,-783969.9999999999,5455C-780425.9999999999,5455,-776882,5843.333333333333,-773338,5852C-769794,5860.666666666666,-766250,5856.333333333332,-762706,5865C-759162,5873.666666666667,-755618,7130.999999999999,-752074,7130.999999999999C-748530,7130.999999999999,-744986,6067,-741442,6067C-737898,6067,-734354,6487,-730810,6548.999999999999C-727266,6611,-723722,6580,-720178,6642C-716634,6704,-713090,7175.666666666666,-709546,7274.999999999999C-706002,7374.333333333333,-702458,7424,-698914,7424C-695370,7424,-691826,6477,-688282,6477C-684738,6477,-681194,6904.166666666667,-677650,7186C-674106,7467.833333333333,-670562,7513.333333333333,-667018,8167.999999999999C-663474,8822.666666666666,-659930,11566,-656386,11566C-652842,11566,-649298,10835,-645754,10835C-642210,10835,-638666,10849,-635122,10877C-631578,10905,-628034,12500,-624490,12500C-620946,12500,-617402,11245,-613858,11245C-610314,11245,-606770,11675,-603226,11675C-599682,11675,-596138,11283.666666666666,-592594,11219C-589050,11154.333333333332,-585506,11122,-581962,11122C-578418,11122,-574874,11129,-571330,11143C-567786,11157,-564242,11455,-560698,11455C-557154,11455,-553610,10960,-550066,10960C-546522,10960,-542978,11195.166666666666,-539434,11499C-535890,11802.833333333334,-532346,12783,-528802,12783C-525258,12783,-521713.99999999994,12779.999999999998,-518169.99999999994,12779.999999999998C-514626,12779.999999999998,-511082,13028,-507538,13028C-503994,13028,-500450,12991.999999999998,-496906,12958C-493361.99999999994,12924,-489817.99999999994,12913.333333333332,-486274,12824C-482730,12734.666666666666,-479186,12242.333333333332,-475642,12116.999999999998C-472098,11991.666666666666,-468554,12054.333333333332,-465010,11929C-461465.99999999994,11803.666666666664,-457921.99999999994,10960,-454378,10960C-450834,10960,-447290,11323,-443746,11323C-440202,11323,-436658,10822,-433114,10822C-429569.99999999994,10822,-426025.99999999994,10964,-422482,10964C-418938,10964,-415394,10308.166666666664,-411850,9967C-408306,9625.833333333332,-404762,9238.833333333332,-401218,8917C-397673.99999999994,8595.166666666666,-394129.99999999994,8314.333333333334,-390586,8036C-387042,7757.666666666666,-383498,7548.499999999999,-379954,7247C-376410,6945.5,-372866,6757.5,-369322,6227C-365778,5696.5,-362234,4857.5,-358690,4063.9999999999995C-355146,3270.5,-351602,1466,-348058,1466C-344514,1466,-340970,1881,-337426,1881C-333882,1881,-330338,1843,-326794,1843C-323250,1843,-319706,1950.9999999999998,-316162,2167C-312618,2383,-309074,3214.9999999999995,-305530,3214.9999999999995C-301986,3214.9999999999995,-298442,2718.833333333333,-294898,1935C-291354,1151.1666666666665,-287810,-1488,-284266,-1488C-280722,-1488,-277178,-625,-273634,-625C-270090,-625,-266546,-907.4999999999999,-263002,-1061C-259458,-1214.5,-255914,-1546,-252370,-1546C-248826,-1546,-245282,724,-241738,724C-238194,724,-234650,-965,-231105.99999999997,-965C-227562,-965,-224018,-755.9999999999999,-220474,-755.9999999999999C-216929.99999999997,-755.9999999999999,-213386,-1132,-209842,-1132C-206298,-1132,-202754,-829,-199209.99999999997,-829C-195666,-829,-192122,-2500,-188578,-2500C-185034,-2500,-181490,-202.99999999999997,-177946,-202.99999999999997C-174402,-202.99999999999997,-170858,-1412,-167314,-1813C-163770,-2214,-160226,-2609,-156682,-2609C-153138,-2609,-149594,-2176,-146050,-2176C-142506,-2176,-138962,-2633.5,-135418,-3037C-131874,-3440.5,-128330,-4597,-124785.99999999999,-4597C-121242,-4597,-117697.99999999999,-3547.333333333333,-114154,-3152.9999999999995C-110609.99999999999,-2758.666666666666,-107066,-2231,-103522,-2231C-99978,-2231,-96434,-3814,-92890,-3814C-89346,-3814,-85802,-3429.9999999999995,-82258,-2662C-78714,-1893.9999999999998,-75170,1306,-71626,1314C-68082,1322,-64537.99999999999,1326,-60993.99999999999,1326C-57450,1326,-53906,996,-50362,909.9999999999999C-46818,823.9999999999999,-43274,780.9999999999999,-39730,780.9999999999999C-36186,780.9999999999999,-32641.999999999996,1861,-29098,1861C-25554,1861,-22010,22,-18466,22C-12310.666666666668,22,-6155.333333333332,267,0,267C2.333333333333333,267,4.666666666666666,250,7,250C9.666666666666664,250,12.333333333333334,268.7047619047619,14.999999999999998,276C17.333333333333332,282.3833333333333,19.666666666666668,292,22,292C24.666666666666668,292,27.333333333333332,291,29.999999999999996,291C32.33333333333333,291,34.666666666666664,297.5,37,301C39.333333333333336,304.5,41.666666666666664,306.09722222222223,44,312C46.666666666666664,318.7460317460317,49.333333333333336,341,52,341C54.333333333333336,341,56.66666666666666,322,59,322C61.33333333333333,322,63.66666666666666,324,66,324C68.66666666666667,324,71.33333333333333,308,74,308C76.33333333333333,308,78.66666666666667,344,81,344C83.66666666666666,344,86.33333333333333,295,89,295C91.33333333333333,295,93.66666666666666,299,96,299C98.33333333333333,299,100.66666666666666,297.6666666666667,102.99999999999999,295C105.66666666666667,291.95238095238096,108.33333333333331,272.76190476190476,111,272C113.33333333333331,271.3333333333333,115.66666666666667,271,118,271C120.66666666666666,271,123.33333333333331,271,126,271C128.33333333333334,271,130.66666666666663,251.66666666666663,133,245C135.33333333333334,238.33333333333331,137.66666666666663,231,140,231C142.66666666666666,231,145.33333333333334,289,148,289C150.33333333333334,289,152.66666666666666,262.6666666666667,155,258C157.33333333333334,253.33333333333331,159.66666666666666,255.66666666666666,162,251C164.66666666666663,245.66666666666663,167.33333333333331,230.35238095238094,170,215C172.33333333333334,201.56666666666663,174.66666666666663,179.0722222222222,177,167C179.66666666666666,153.2031746031746,182.33333333333334,143.28571428571428,185,141C187.33333333333331,139,189.66666666666663,140,192,138C194.33333333333334,136,196.66666666666666,121.39722222222221,199,114C201.66666666666666,105.54603174603173,204.33333333333331,102.90793650793651,207,91C209.33333333333334,80.58055555555555,211.66666666666663,55.833333333333336,214,49.99999999999999C216.66666666666663,43.33333333333333,219.33333333333331,40,222,40C224.33333333333331,40,226.66666666666663,97,229,97C231.33333333333334,97,233.66666666666663,61,236,61C238.66666666666666,61,241.33333333333331,80,244,80C246.33333333333331,80,248.66666666666663,64,251,64C253.33333333333331,64,255.66666666666666,74,258,74C260.6666666666667,74,263.3333333333333,69,266,59C268.3333333333333,50.25,270.6666666666667,29.65555555555555,273,20C275.66666666666663,8.965079365079367,278.33333333333326,0,281,0C283.3333333333333,0,285.6666666666667,2.333333333333333,288,5C290.3333333333333,7.666666666666666,292.66666666666663,9.825,295,16C297.6666666666667,23.057142857142857,300.3333333333333,47,303,47C305.3333333333333,47,307.6666666666667,45.666666666666664,310,43C312.33333333333326,40.333333333333336,314.6666666666667,26,317,26C319.6666666666667,26,322.3333333333333,50.476190476190474,325,52C327.3333333333333,53.33333333333333,329.66666666666663,53.099999999999994,332,54C334.66666666666663,55.02857142857142,337.33333333333326,55.34603174603174,340,58C342.3333333333333,60.32222222222222,344.6666666666667,68,347,68C349.33333333333326,68,351.66666666666663,21,354,21C356.6666666666667,21,359.3333333333333,21,362,21C364.3333333333333,21,366.66666666666663,33.5,369,37C371.66666666666663,41,374.33333333333326,43,377,43C379.33333333333326,43,381.6666666666667,20,384,20C386.33333333333326,20,388.6666666666667,29.999999999999996,391,29.999999999999996C393.6666666666667,29.999999999999996,396.3333333333333,20,399,20C401.33333333333326,20,403.6666666666667,32,405.99999999999994,38C408.33333333333326,44,410.66666666666663,56,413,56C415.6666666666667,56,418.3333333333333,49.25714285714285,421,42C423.33333333333326,35.65,425.6666666666667,17,428,17C430.66666666666663,17,433.33333333333326,32,436,32C438.33333333333326,32,440.6666666666667,32,442.99999999999994,32"
style="stroke: rgb(1, 204, 122); fill: none;"></path>
</g>
</g>
</svg>
Fascinating problem. I can't see the solution myself but have tried to simplify what you've done into a very simple demo by removing rounded decimals and reducing your paths down to the bare minimum.
It appears that the path off the viewbox is causing the problem, i.e. these two:
-3877882,100C-1067490,-4122,-1063946,192,-1060402,2893C-1056858,5594,-1053314,11344,-1049770,11344
but it shouldn't render poorly like that. Would be interested to see the solution. Chrome can be so fussy with SVG.
https://codepen.io/PotatoTrade_/pen/eYLYbLe
Related
Why this SVG has half of its outline missing in both Chrome and Firefox?
This is an SVG which has a complete outline (the black border) in Inkscape, but it is not the case in Chrome and Firefox: <svg width="100%" height="300%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;"> <defs> <path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path> <mask id="mask/main0" maskUnits="userSpaceOnUse"> <use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"></use> <use xlink:href="#main0" fill="#000000" stroke="#000000" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use> </mask> </defs> <use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use> <use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use> </svg> Here are the renderings: Increasing the view box' width restores the full outline. Decreasing that width makes the outline disappear completely. Why is it the case? Can it be corrected, so that there is always a full outline? By corrected, I do not mean defining directly a rounded path, but leaving the method of drawing mostly as it is, i.e. a polygon with an outset. I need it like that for a smooth in-browser animation. Drawing an opaque black filled polygon and then filling it with another, smaller polygon wont't work as well, as I need a semi-transparent fill but opaque border. Thus the use of a mask.
The mask simply isn't big enough to cover the shape. You've not set any height/width for it so you'll get the defaults of 120%. That's not enough in this case for the width. Increasing the viewBox width corrects things as the mask width is a percentage of that viewBox width so you're indirectly increasing the mask width. <svg width="100%" height="300%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;"> <defs> <path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path> <mask id="mask/main0" maskUnits="userSpaceOnUse" width="150%"> <use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"></use> <use xlink:href="#main0" fill="#000000" stroke="#000000" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use> </mask> </defs> <use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use> <use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use> </svg>
Facing problem while trying trying to rotate SVG animation
I'm a beginner in animation. I am trying to learn svg animation from the following piece of code. <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200"> <path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path> <path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;"> <animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion> </path> <g> <desc>white mask</desc> <rect x="90" y="80" width="15" height="65" fill="white" /> <rect x="65" y="105" width="65" height="15" fill="white" /> </g> </svg> I'm tring to move the arrow to rotate in opposite direction (i.e anticlockwise) but unable to achieve that. I have tried to change the path but I'm stuck at this point. Any help will be appreciated.
We can use keyTimes and keyPoints to run the animation backwards and alter the transform to rotate the arrow. See how the keyPoints go from 1 to 0. <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200"> <path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path> <path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(90)" style="fill: #ff0000;"> <animateMotion keyPoints="1;0" keyTimes="0;1" path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion> </path> <g> <desc>white mask</desc> <rect x="90" y="80" width="15" height="65" fill="white" /> <rect x="65" y="105" width="65" height="15" fill="white" /> </g> </svg>
Tick inside circle
I am trying to create tick Inside filled circle. I did following but, doesn't looks perfect. <svg height=10 viewBox="0 0 10 10" width=10> <g fill="none" stroke="#22AE73" stroke-width="1"></g> <circle cx=5 cy=5 fill='#29AB87' r=5 /> <polyline stroke="#ffffff" stroke-width="2" points="2.5,5.8 4.7,7.9 9.2,2.4 " /> </svg> Any help would be greatly appreciated.
Your points are reaching the 10 10 part of your viewbox, hence it doesn't fit. You could change your points to lower values. Alternatively, here's an svg that might work for you that is path based <svg width="10px" height="10px" viewBox="0 0 10 10" > <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="tick"> <circle id="Oval" fill="#349006" cx="5" cy="5" r="5"></circle> <path d="M7.26241838,2.25 L8.35843389,3.34601551 L3.9390165,7.76543289 L3.937,7.763 L3.93041937,7.77093389 L1.65,5.49051452 L2.74601551,4.39449901 L3.932,5.58 L7.26241838,2.25 Z" id="Combined-Shape" fill="#FFFFFF"></path> </g> </g> </svg>
Encoded characters shows ok on HTML but get literally shown on SVG
I have a HTML page where a SVG element is created through javascript. If I use encoded characters in the HTML portion of the page, like µ/m³, it's perfectly rendered as µ/m³ However, when I put the same text inside a SVG text element, the literal µ/m³ text is shown on the page. The whole page encoding is UTF-8 and both files HTML and javascript are saved with UTF-8 encoding. Any idea about what can be happening here? EDIT: I add the full source code of the page once javascript has added the SVG part. The same effect is happening here, the page renders ok the encoded chars just before the svg part, but shows them encoded inside the svg code <head> <meta charset="utf-8"> <title>Gráficas de calidad del aire</title> <link type="text/css" rel="stylesheet" href="../css/main.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="../js/airQuality.js" type="text/javascript"></script> </head><body><div id="menu"><ul><li id="ultima" class="menuEle">Última medición global</li><li id="so2" title="Dióxido de sulfuro" class="menuEle selected">SO2</li><li id="no" title="Óxido de nitrógeno" class="menuEle">NO</li><li id="no2" title="Dióxido de nitrógeno" class="menuEle">NO2</li><li id="co" title="Monóxido de carbono" class="menuEle">CO</li><li id="pm10" title="Partículas en suspensión de menos de 10 micrómetros" class="menuEle">PM10</li><li id="o3" title="Ozono" class="menuEle">O3</li></ul></div> <div id="mainContainer">µg/m³ <svg class="chart" width="1000" height="600"><g transform="translate(50, 0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M-6,580.5H0.5V5.5H-6"></path><g class="tick" opacity="1" transform="translate(0,580.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,498.3571428571429)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">50</text></g><g class="tick" opacity="1" transform="translate(0,416.2142857142857)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">100</text></g><g class="tick" opacity="1" transform="translate(0,334.07142857142856)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">150</text></g><g class="tick" opacity="1" transform="translate(0,251.92857142857144)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">200</text></g><g class="tick" opacity="1" transform="translate(0,169.78571428571428)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">250</text></g><g class="tick" opacity="1" transform="translate(0,87.64285714285717)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">300</text></g><g class="tick" opacity="1" transform="translate(0,5.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">350</text></g></g><g transform="translate(0, 580)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M1000.5,6V0.5H50.5V6"></path><g class="tick" opacity="1" transform="translate(972.0568862275449,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(903.7934131736527,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Wed 13</text></g><g class="tick" opacity="1" transform="translate(835.5299401197605,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(767.2664670658683,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Tue 12</text></g><g class="tick" opacity="1" transform="translate(699.002994011976,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(630.7395209580839,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Mon 11</text></g><g class="tick" opacity="1" transform="translate(562.4760479041917,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(494.2125748502994,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Feb 10</text></g><g class="tick" opacity="1" transform="translate(425.9491017964072,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(357.68562874251495,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Sat 09</text></g><g class="tick" opacity="1" transform="translate(289.42215568862275,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(221.15868263473055,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Fri 08</text></g><g class="tick" opacity="1" transform="translate(152.89520958083833,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(84.6317365269461,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Thu 07</text></g></g><g><text class="verticales" x="-285.89285714285717" y="10" transform="rotate(-90)">µg/m³</text></g><g><path d="M1000,566.5285714285715L1000,566.5285714285715L994.311377245509,563.0785714285714L988.622754491018,560.6142857142858L982.9341317365269,567.0214285714286L977.245508982036,567.5142857142857L971.5568862275449,567.1857142857143L965.868263473054,567.6785714285714L960.1796407185628,567.0214285714286L954.4910179640718,564.7214285714285L948.8023952095808,567.1857142857143L943.1137724550898,572.2785714285715L937.4251497005988,574.0857142857143L931.7365269461078,574.25L926.0479041916168,573.5928571428572L920.3592814371258,573.4285714285714L914.6706586826347,573.4285714285714L908.9820359281438,573.4285714285714L903.2934131736527,573.4285714285714L897.6047904191618,571.7857142857143L891.9161676646706,570.1428571428571L886.2275449101797,571.7857142857143L880.5389221556886,571.7857142857143L874.8502994011976,571.7857142857143L869.1616766467066,571.7857142857143L863.4730538922156,570.1428571428571L857.7844311377246,566.8571428571429L852.0958083832335,568.5L846.4071856287425,566.8571428571429L840.7185628742515,566.8571428571429L835.0299401197605,566.8571428571429L829.3413173652694,563.5714285714286L823.6526946107784,561.9285714285714L817.9640718562874,561.9285714285714L812.2754491017964,563.5714285714286L806.5868263473053,568.5L800.8982035928144,568.5L795.2095808383233,570.1428571428571L789.5209580838324,568.5L783.8323353293413,568.5L778.1437125748504,568.5L772.4550898203593,568.5L766.7664670658683,566.8571428571429L761.0778443113772,565.2142857142857L755.3892215568862,563.5714285714286L749.7005988023952,565.2142857142857L744.0119760479042,566.8571428571429L738.3233532934132,565.2142857142857L732.6347305389222,565.2142857142857L726.9461077844311,570.1428571428571L721.2574850299401,570.1428571428571L715.5688622754491,568.5L709.8802395209581,568.5L704.1916167664671,571.7857142857143L698.502994011976,570.1428571428571L692.814371257485,566.8571428571429L687.1257485029939,566.8571428571429L681.437125748503,566.8571428571429L675.7485029940119,568.5L670.059880239521,570.1428571428571L664.3712574850299,571.7857142857143L658.682634730539,571.7857142857143L652.9940119760479,571.7857142857143L647.3053892215569,571.7857142857143L641.6167664670659,571.7857142857143L635.9281437125749,571.7857142857143L630.2395209580839,573.4285714285714L624.5508982035929,571.7857142857143L618.8622754491017,571.7857142857143L613.1736526946108,568.5L607.4850299401197,563.5714285714286L601.7964071856288,561.9285714285714L596.1077844311377,563.5714285714286L590.4191616766467,568.5L584.7305389221557,568.5L579.0419161676646,568.5L573.3532934131737,566.8571428571429L567.6646706586826,568.5L561.9760479041917,568.5L556.2874251497005,570.1428571428571L550.5988023952096,571.7857142857143L544.9101796407185,570.1428571428571L539.2215568862275,570.1428571428571L533.5329341317365,568.5L527.8443113772455,570.1428571428571L522.1556886227545,570.1428571428571L516.4670658682635,568.5L510.7784431137724,570.1428571428571L505.0898203592814,565.2142857142857L499.4011976047904,565.2142857142857L493.7125748502994,566.8571428571429L488.0239520958084,568.5L482.33532934131733,561.9285714285714L476.6467065868263,566.8571428571429L470.9580838323353,566.8571428571429L465.2694610778443,566.8571428571429L459.5808383233533,568.5L453.8922155688623,575.0714285714286L448.20359281437123,576.7142857142857L442.5149700598802,576.7142857142857L436.8263473053892,576.7142857142857L431.1377245508982,576.7142857142857L425.4491017964072,575.0714285714286L419.7604790419162,575.0714285714286L414.0718562874252,575.0714285714286L408.3832335329341,576.7142857142857L402.6946107784431,576.7142857142857L397.0059880239521,576.7142857142857L391.3173652694611,576.7142857142857L385.62874251497004,576.7142857142857L379.94011976047904,576.7142857142857L374.251497005988,576.7142857142857L368.56287425149696,576.7142857142857L362.87425149700596,576.7142857142857L357.18562874251495,576.7142857142857L351.49700598802394,576.7142857142857L345.80838323353294,575.0714285714286L340.11976047904193,575.0714285714286L334.43113772455087,573.4285714285714L328.74251497005986,570.1428571428571L323.05389221556885,570.1428571428571L317.36526946107784,570.1428571428571L311.67664670658684,568.5L305.98802395209583,568.5L300.2994011976048,568.5L294.61077844311376,566.8571428571429L288.92215568862275,563.5714285714286L283.23353293413174,565.2142857142857L277.54491017964074,565.2142857142857L271.85628742514973,568.5L266.16766467065867,566.8571428571429L260.47904191616766,570.1428571428571L254.79041916167665,573.4285714285714L249.10179640718562,573.4285714285714L243.4131736526946,571.7857142857143L237.7245508982036,573.4285714285714L232.0359281437126,571.7857142857143L226.34730538922156,571.7857142857143L220.65868263473055,570.1428571428571L214.97005988023952,568.5L209.28143712574848,570.1428571428571L203.59281437125748,570.1428571428571L197.90419161676647,570.1428571428571L192.21556886227543,570.1428571428571L186.52694610778443,570.1428571428571L180.83832335329342,566.8571428571429L175.1497005988024,566.8571428571429L169.46107784431138,563.5714285714286L163.77245508982037,558.6428571428571L158.08383233532933,557L152.39520958083833,565.2142857142857L146.7065868263473,566.8571428571429L141.01796407185628,563.5714285714286L135.32934131736528,563.5714285714286L129.64071856287424,565.2142857142857L123.95209580838323,568.5L118.26347305389221,570.1428571428571L112.5748502994012,568.5L106.88622754491018,565.2142857142857L101.19760479041916,555.3571428571429L95.50898203592814,568.5L89.82035928143712,568.5L84.1317365269461,570.1428571428571L78.44311377245509,570.1428571428571L72.75449101796407,568.5L67.06586826347305,566.8571428571429L61.377245508982035,568.5L55.68862275449102,570.1428571428571L50,570.1428571428571" stroke="blue" stroke-width="2" fill="none"></path></g><g><rect x="50" y="5" width="970" height="1" stroke="red"></rect></g></svg> </div> </body>
You can use selection.html("µ/m³"). This causes the string to be parsed as XML, and the entities gets replaced by the characters they represent.
I know there is a paragraph in the d3 doc that says
Also, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html.
This seems to be a very old text and is no longer true, unless you want to support browsers like IE<=8 or Opera<=12. For all other browsers this works.
How to make the following SVG fit its parent (horizontally and vertically)?
Live reproduction: https://codepen.io/alexcheninfo/pen/dZqmLv
This is the SVG:
<svg class="line-chart" width="860" height="405"></svg>
This is the CSS of the container:
.common-section {
position: relative;
width: 100%;
background-color: red;
margin-bottom: 30px;
}
Screenshot:
Two things: You are missing the viewBox attribute. Adding preserveAspectRatio="xMidYMid meet" will maintain the original aspect ratio as the image scales. If you need to support IE 11 or below, then you either need to use CSS to preserve the aspect ratio (see http://www.mademyday.de/css-height-equals-width-with-pure-css.html) or you could use JS to automate that for you (see https://gist.github.com/Heydon/369185d08d9ce2426f01863625e95525). Here’s a working version of your CodePen demo: https://codepen.io/tedw/pen/YEOLPr?editors=1100 FWIW, here are some good resources regarding scaling SVGs: https://css-tricks.com/scale-svg/ https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg Hope that helps! UPDATE: I imported your SVG into Illustrator and did some optimization (including running it through https://jakearchibald.github.io/svgomg/). Here’s the final code: <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 213" preserveAspectRatio="xMidYMid meet" style="font-family: Helvetica, sans-serif; font-size: 6px;" fill="#000"> <g transform="translate(20 60)"> <path d="M490 128.2l-71.2 5-71-.3L63-57l-71 176.3"/> <circle cx="489.9" cy="128.2" r="3"/> <circle cx="418.8" cy="133.4" r="3"/> <circle cx="347.7" cy="132.9" r="3"/> <circle cx="63.2" cy="-57" r="3"/> <circle cx="-7.9" cy="119.3" r="3"/> </g> <text transform="translate(498.37 210.08)">17/10/18</text> <text transform="translate(427.266 210.08)">17/10/17</text> <text transform="translate(356.16 210.08)">17/10/16</text> <text transform="translate(71.735 210.08)">17/10/12</text> <text transform="translate(.85 210.08)">17/10/11</text> <text transform="translate(0 201.83)">0</text> <text transform="translate(0 179.485)">100</text> <text transform="translate(0 157.137)">200</text> <text transform="translate(0 134.793)">300</text> <text transform="translate(0 112.47)">400</text> <text transform="translate(0 90.123)">500</text> <text transform="translate(0 67.78)">600</text> <text transform="translate(0 45.435)">700</text> <text transform="translate(0 23.095)">800</text> <g fill="none" stroke="#000"> <path d="M12 200.6h498"/> <path d="M12 178.3h498"/> <path d="M12 156h498"/> <path d="M12 133.6h498"/> <path d="M12 111.3h498"/> <path d="M12 89h498"/> <path d="M12 66.6h498"/> <path d="M12 44.3h498"/> <path d="M12 21.8h498"/> </g> </svg>