The following svg is working in chrome and firefox, but is not working in Safari. And I haven't been able to test it in ie.
Safari does show the image, but does not apply the mask.
<div class="widget-image-l">
<svg width="645px" height="470px" viewBox="0 0 645 470" version="1.1">
<g stroke="none" fill-rule="evenodd">
<mask id="mask" fill="white">
<path d="M38.5969948,-2.22080132e-11 C16.8456745,30.2125678 3.07305242,70.3781435 0.923015792,123.840504 C-7.15396842,324.681101 174,465.890038 341,469.890015 C508,473.889991 658.942386,367.295224 643.971193,180.147362 C637.875363,103.946248 607.401187,44.0482171 563.7625,-2.35331754e-11 L38.5969948,-1.42108547e-14 Z" id="path"></path>
</mask>
<g mask="url(#mask)">
<image x="-1020" y="0" width="1867.94872" height="470" xlink:href="http://www.castleknockhotel.com/cmsGallery/imagerow/5904/resized/1600x400/cycling_passion_of_life_high_resolution_wallpaper_for_desktop_background_download_cycling_images_free.jpg" transform="scale(-1 1)">
</image>
</g>
</g>
</svg>
</div>
Related
I generated a SVG using Adobe XD. They use transform for positioning things but the text in my mini computer screen is not always the same width (it is dynamically generated). I have tried anchored, anything I could find but it still didn't work. This is how it looks with the current code:
Here is the code:
<svg xmlns="http://www.w3.org/2000/svg" width="903.5" height="860.5" viewBox="0 0 1200 1041">
<g transform="translate(-397)">
<g
transform="translate(507 975)"
fill="#fff"
stroke="#707070"
strokeWidth="1"
>
<rect width="907" height="66" rx="33" stroke="none" />
<rect x="0.5" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(901 613)" fill="#fff" />
<g
transform="translate(397)"
fill="#232323"
stroke="#fff"
stroke-width="30"
>
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="white"
fontSize="96"
fontFamily="Fredoka"
>
{screenText}
</text>
</g>
</svg>
You can use transform/translate, text-anchor and dominant-baseline to place a text in the middle of something.
body {
background: gray;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1041">
<g
transform="translate(600 975)"
fill="#fff"
stroke="#707070"
stroke-width="1">
<rect x="-453.5" width="907" height="66" rx="33" stroke="none" />
<rect x="-454" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(545.5 613)" fill="#fff" />
<g transform="translate(50)"
fill="#232323"
stroke="#fff"
stroke-width="30">
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="#fff"
font-size="96"
font-family="Fredoka"
transform="translate(600 300)"
text-anchor="middle"
dominant-baseline="middle">
{screenText}
</text>
</svg>
Thanks to Buhan Yu's comment I learned that you need to specify x and y to center align it. I set x="50%" and it worked!
I have an <svg /> element and when I navigate to it in Safari using VoiceOver, the VO announces 6 different images instead of one. Chrome works fine and this element gets announces as an "Unlabelled image":
<svg aria-labelledby="imageLabel-10" class="foo" viewBox="0 -60 577 586">
<title id="sometitle-10"></title>
<defs>
<polygon id="someid" points="1 2 3">
</polygon>
<path d="M.123" id="someOtherId">
</path>
<mask fill="white" id="oneMoreId">
<use xlink:href="#someHred">
</use>
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<g style="transform: translateY(-22.0061px); transform-origin: 396.328px 301.186px;">
<path d="M225" fill="#F75647" fill-rule="nonzero" transform="translate(0, 0)">
</path>
</g>
<g mask="url(#someHref)">
<image height="461" transform="scale(1.1)" width="693" x="60" xlink:href="//cuteCDNPath.jpg" y="-10" style="transform: scale(1.05339); transform-origin: 286.5px 220.5px;">
</image>
<use fill="#000" fill-opacity="0.01" xlink:href="#someOtherHref" style="mix-blend-mode: multiply;">
</use>
</g>
</g>
</svg>
macOS Mojave 10.14.6
Safari 13.0.5
According to Deque (specifically strategy #5), <svg> tags require a role attribute to be set to img. I am not 100% sure this is the right solution, but adding role="img" did fix my problem.
<svg
aria-labelledby="imageLabel-10"
class="..."
role="img" <!-- this was the missing attribute -->
viewBox="..."
>
...
</svg>
My svg is displayed correct in IE, Edge and Chrome. Firefox doesn't work. The problem is, that the text doesn't appear correct.
Chrome
chrome
FF
Firefox Version
Here the code of my svg. I really don't know what the problem is.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="780px" height="540px" viewBox="0 0 780 540" enable-background="new 0 0 780 540" xml:space="preserve">
<a href="https://www.google.ch" target="_blank">
<g>
<image
overflow="visible"
opacity="0.35"
width="56"
height="52"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA1CAYAAAD72kP+AAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAu9JREFUeNrsmmtv0zAUhp1LU5goDDGuAgk+8oH//0s2beIqBmUbW9e10DVN13AOeU0PrtMLrUuqOtKreU2jniev7ZP4OFRbcMQzzgcbxJIvAhkY2iRIqVJIhorweYx2uAGwI2goNLJBasA66Q6pQdoh1SrsqnbshpSSfpA6pGtSpkFNyBiAT0nPSXsAjSvu4oB0RTohHZPOAf6769ogGwB8Q3pF2hVuVtFJhuyRTkmHpD4c7QP0j0OBgGTnHpJekl6jnVR4XPL4+0m6S+qSPiNePZfkZjcM4dpt0n0APsI4rTJkF+41EGsk4y1LITFgE1xUxw2oYneNMCZriHsiG8RTHgBkrqxqGpGxhWVZIFRbcHhID+khPaSH9JAe0kN6SA/pIT2kh/SQHtJDbiFkbvzdlKM07jInR0J5hYF1bGa8UyH5C7y0zsWSFMrUuK5QNUBdyRqIeIcmbGzcEV0d4hXpFulCFQUgvhm31HhlOqgIIMNxieASsbZVURfJZA+MxIV6gbYGoET9vSodWtwP/hMcQ3BBh8t0Z6RPpCPSW1XUQlowa2RCyqB1l81s9lsAgzV2TV2HZOe+kt6R9kkHaJ/g/NDmpDkm+7C+h3a/ZHy6hLXBsUvfSB/h3j7EgE24m0pjopLZaij6u67edtC+XgNsGVzTAneEz84wl6RmbNEcs1YPF7ehK/zvAnYeuAPAccH1A861xIQzMbSiGT8ou6521AXsonDvMR7P8d1UjMGJVBfN+eM3cHXVsMvAdRFP2cQ4N+QqYU1I53DLTBA6n0bIpVx653r9A9ITVWyqeAE9U0VJfhcPFQmuy41cd4Gpn0GOoSYmk7boktm/PGouMwsuCruH84ka79i4dAm3yrw2L6wG3UFXlvtuvriAc5G8p8E+VsUGKA05BOQpEvt3F3AuH8dssLz15B6g63CyB9COK7h1PHNK2BrgzIlnADmBW+dbRCDeYkJLWnL+Yr7OVyW5Pyi3LFv4w6/WzTh+CTAA7UuPJ4vLMvAAAAAASUVORK5CYII="
transform="matrix(1 0 0 1 490.2483 147.248)"
></image>
<g>
<g>
<polygon
fill="red"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
<polygon
fill="none"
stroke="#D9D9D9"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
</g>
</g>
</g>
</a>
<text transform="matrix(1 0 0 1 509.5081 163.1104)">
<tspan x="0" y="0" fill="#949495" font-family="'Calibri'" font-size="11">
KVP
</tspan>
<tspan
x="-0.516"
y="12"
fill="#949495"
font-family="'Calibri'"
font-size="11"
>
[VP]
</tspan>
</text>
<path
fill="none"
stroke="#A3D2C4"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M664.349,162.086"
/>
</svg>
This is not an answer, it's just a comment: As you can see the next example works the same way in Chrome and FF. There must be something else in your code that is causing the problem.
svg{border:1px solid;}
<svg viewBox="240 120 90 50">
<rect x="260" y="135" width="50" height="20" fill="none" stroke="black" />
<text id="txt"
transform="matrix(1 0 0 1 262.6731 147.9746)"
fill="#1D1D1B"
font-family='Calibri'
font-size="11"
>
Betrieb
</text>
</svg>
UPDATE
The OP added more code.
I've replaced the <tspan> with <text> elements. Instead of having the <a> inside the text, now the <a> is wrapping the text.
Also I've replaced your image with a shadow generated with an svg filter.
svg{border:1px solid}
text{fill:#949495;font-family:Calibri;font-size:11;text-anchor:middle}
<svg viewBox="480 140 78 60">
<defs>
<filter id="f">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.3" result="desenfoque"></feGaussianBlur>
<feOffset in="desenfoque" dx="0" dy="0" result="sombra"></feOffset>
<feMerge>
<feMergeNode in="sombra"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<a href="https://www.google.ch" target="_blank">
<g>
<g>
<g filter="url(#f)">
<polygon
fill="red"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
<polygon
fill="none"
stroke="#D9D9D9"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
</g>
</g>
</g>
</a>
<a href="https://google.ch">
<text x="518.5" y="167" >KVP</text>
</a>
<a href="https://google.ch">
<text x="518.5" y="180" >[VP]</text>
</a>
<!--This path has a width and a height == 0
you can delete it -->
<path
fill="none"
stroke="#A3D2C4"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M664.349,162.086"
/>
</svg>
Is it possible to scale an inline SVG without touching the SVG? So that only the wrapper div is able to change the width / height according to the image ratio?
Here is my code:
https://jsfiddle.net/sekmwfdg/1/
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" width="640" height="480">
<defs>
<clipPath id="a">
<path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="translate(80) scale(.94)">
<g stroke-width="1pt">
<path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
<path fill="#fff" d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z"/>
<path fill="#fff" d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z"/>
<path fill="#c00" d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z"/>
</g>
</g>
</svg>
</div>
It should work for all modern Browsers + IE 11
You should add viewBox="0 0 640 480" to you svg tag and it will take width and height from its parent container
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
<defs>
<clipPath id="a">
<path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="translate(80) scale(.94)">
<g stroke-width="1pt">
<path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
<path fill="#fff" d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z"/>
<path fill="#fff" d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z"/>
<path fill="#c00" d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z"/>
</g>
</g>
</svg>
</div>
I'm trying to center an SVG element in a parent element. However, I'm finding discrepancies between Chrome and Safari. The following code centers the text nicely inside the square on Chrome, but not on Safari:
<svg width="200px" height="200px">
<g transform="translate(70,70)">
<path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path>
<g>
<text text-anchor="middle" dominant-baseline="middle" style="fill: white" transform="scale(2)">
<tspan>test</tspan>
</text>
</g>
</g>
</svg>
Result:
I created a jsFiddle with this test case:
https://jsfiddle.net/yq11jot0/
How do I vertically center the text inside the square?
How about just using dy instead of dominant-baseline?
<svg width="200px" height="200px">
<g transform="translate(70,70)">
<path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path>
<g>
<text text-anchor="middle" dy="0.25em" style="fill: white" transform="scale(2)">
<tspan>test</tspan>
</text>
</g>
</g>
</svg>
Apparently, Safari wants the inner tspan have the dominant baseline set to middle. So this also works on Safari:
<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(50,50)">
<path class="node" d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80" style="fill: rgb(247, 61, 0);"></path>
<g>
<text text-anchor="middle" fill="white"><tspan dominant-baseline="middle">test</tspan></text>
</g>
</g>
</svg>
Try removing all the scaling and translating (can have issues in browsers) ... does this work in Safari?
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 H200 V200 H0 z" fill="gray" />
<text x="100" y="100" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="100" >test</text>
</svg>
Note the following:
Not using px units
Text positioned to the center of the square using x and y attributes.