I am trying to add a text inside svg path i copy from figma.
Here is how it's look in figma:
Here is my code base:
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<text>hello</text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
</svg>
The main thing is to swap the order of the path and text elements so the text element is drawn on top of the path. After that you just need to position the text where you want it and ensure it has a fill colour so you can see it.
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
<text y="43" x="61" fill="white">hello</text>
</svg>
Related
I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>
The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>
I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");
Currently I'm trying to load in my custom svg component inside an image tag. But for some reason I am unable to see the svg image which is inside a map component. My custom SVG file is like so where I am loading another image inside the SVG:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
<clipPath id="clip">
<path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
-284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
</clipPath>
<image x="-200" y="30" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
<use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
</svg>
And my image tag is like so:
<img src="icon.svg"/>
But when I go to check the network tab this is what it shows:
CodeSandBox: https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-6rupe?file=/src/App.js
To be honest I'm not sure if there's an issue with external/cross-domain image resources in codesandbox (could also be an issue developing locally). The duplicate Robert tagged leads me to believe the issue is with this specific SVG asset itself.
But there is still a way to render it.
Import the svg image as a ReactComponent and render it instead of the img tag.
Source
import { ReactComponent as Icon} from "./icon.svg";
...
<Icon
style={{
width: 48,
height: 48
}}
onMouseEnter={() => {
setSelectedProperty(item);
setIsPopupShown(true);
}}
onMouseOut={() => {
setSelectedProperty(null);
setIsPopupShown(false);
}}
/>
I am simply trying to render the svg on the page however it is not loading.
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linejoin="round" stroke-miterlimit="2">
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path
d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z"
fill="#404040" />
</g>
</g>
</svg>
This is my SVG from my HTML, on the webpage it is loaded.
However it doesn't render to the page.
I should add I also have a width and height on the svg of 25px.
Maybe there is something on top the icon. Try with
svg {
width: 25px;
z-index: 200;
}
<clipPath id="b">
<path d="M712 0h39.1v23.6H712z"/>
</clipPath>
<g clip-path="url(#b)">
Id's for all components were the same. Ids need to be unique. Must have been a setting in Affinity Designer.
I hate weird Matrix conversions.
Your SVG is a soccerball, and I presume all that mumbo jumbo is to make it look round? It is not round!
I multiplied the path by 10 with: https://yqnn.github.io/svg-path-editor/
Made it a Relative path so positioning is all done with the first M225 444
adjusted viewBox
removed SVG mumbo jumbo
added <circle> for reference
Took some minutes to adjust to scale(1.08, 1.333) and position with M225 444
re-adjusted viewBox
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<circle cx='50%' cy='50%' r='50%' fill='red'></circle>
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z" fill="#404040" />
</g>
</g>
</svg>
<!-- My Version: -->
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<circle cx='50%' cy='50%' r='50%' fill='green'></circle>
<path transform="scale(1.08, 1.333)" fill='#404040' d='M225 444v-58l63-30l63 30v55a338 338 90 01-126 3zm-125-65a421 421 90 00110 53v10a334 334 90 01-125-57l15-7zm378 3a296 296 90 01-118 56v-53l62-30l55 26zm-260-121l63 29v58l-63 30l-63-30v-58l63-30zm-204 27l60-27l63 29v58l-61 28c-29-25-50-54-62-88zm532-3a214 214 90 01-60 89l-55-26v-58l63-30l52 25zm-123-120l62 30v58l-62 29l-63-30v-58l63-30zm-135 0l63 30v58l-63 29l-62-30v-58l62-30zm-275 0l61 30v58l-63 29a182 182 90 012-116zm522 104c5-17 6-30 6-46c0-17-6-34-10-45l15-7a171 171 90 012 105l-13-7zm-318-200l63 29v58l-63 30l-63-30v-58l63-30zm-138 2l58 27v58l-63 30l-59-28a220 220 90 0164-87zm404 3c28 25 50 54 62 87l-51 24l-63-29v-58l52-24zm-123-62c43 10 82 30 114 54l-51 24l-63-30v-48zm-134-6a347 347 90 01125 4v50l-63 30l-62-30v-54zm-12 15c-23 5-46 12-61 20c-16 6-40 21-51 30l-14-6a301 301 90 01126-57v13z' />
</svg>
<style>
svg {
background: pink;
width:180px;
}
</style>
I have an SVG file that I found on the web and it has a text "AX DESIGN" and if I use that svg file in html and put it on top of, say, another div(which has background color of RED) then I can see div's background color through that AX DESIGN text area. I also wanted to add another text which is also possible to see through that text. What online tool can I use to achieve that? By the way here is that photo
<svg width="1145" height="1025" viewBox="0 0 1145 1025" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1145 0H0V1025H1145V0ZM290.4 516.8L289.4 516.6C288.333 516.467 287.333 516.067 286.4 515.4C285.2 514.733 284.067 513.933 283 513C282.067 512.067 281.133 511 280.2 509.8C279.267 508.467 278.467 507.333 277.8 506.4C277.133 505.467 276.4 504.133 275.6 502.4C274.933 500.667 274.4 499.467 274 498.8C273.733 498 273.2 496.6 272.4 494.6C271.6 492.6 271.067 491.333 270.8 490.8L261.8 467.6C258.467 459.2 255 450.067 251.4 440.2L241.2 413.2C239.333 408.4 236.667 401.2 233.2 391.6C232.667 390.4 231.867 388.533 230.8 386C229.867 383.333 229.133 381.333 228.6 380L228.4 379.2L204.2 374C205.667 375.067 206.867 376.333 207.8 377.8C208.2 378.2 208.8 379.267 209.6 381L214.2 393.2L191.2 453.6L172.6 502.8C171.267 505.333 169.8 507.533 168.2 509.4C166.6 511.267 165.2 512.667 164 513.6C162.933 514.533 161.733 515.267 160.4 515.8C159.2 516.333 158.4 516.667 158 516.8H157V520H197V516.8H193.2C190.667 516.667 187.867 515.8 184.8 514.2C181.867 512.6 179.933 510.2 179 507C178.067 503.667 178.267 499.8 179.6 495.4L188.6 471.6L191.2 464.6H241.8L244.4 471.6L253.8 496.2C254.467 498.067 254.933 499.8 255.2 501.4C255.6 504.467 255.4 507.067 254.6 509.2C253.8 511.333 252.733 512.867 251.4 513.8C250.067 514.733 248.467 515.467 246.6 516C244.867 516.533 243.6 516.8 242.8 516.8H241.2V520H290.4V516.8ZM240.2 460.6H192.8L195.4 453.6L216.2 398.8L216.4 398.2L237.6 453.6L240.2 460.6ZM439.328 513.4C441.061 514.733 443.461 515.533 446.528 515.8V520H399.728V515.8L404.328 515.6C410.995 515.467 414.328 514.4 414.328 512.4C414.328 511.467 413.528 509.733 411.928 507.2L377.728 454.8L371.528 463.8C367.528 469.8 363.195 476.267 358.528 483.2C353.995 490.133 351.195 494.6 350.128 496.6L349.328 498.2C347.995 501.4 347.328 504 347.328 506C347.328 512.267 353.461 515.6 365.728 516V520H320.328V516C324.995 515.2 329.461 512.8 333.728 508.8C335.461 507.333 337.861 504.6 340.928 500.6L374.928 450.4L332.528 385.6C331.461 384 330.795 382.933 330.528 382.4C328.928 379.733 327.528 377.8 326.328 376.6C325.261 375.533 323.795 374.6 321.928 373.8H346.928L386.728 435L409.928 401.8C414.595 395.267 416.928 390.067 416.928 386.2C416.928 381.533 412.928 378.8 404.928 378H404.528H403.728H402.728H401.728C401.328 377.867 401.061 377.8 400.928 377.8V373.8H442.328V377.8C434.595 378.867 426.795 385.2 418.928 396.8L389.928 440L431.528 503.2V503.4C432.861 505.4 433.661 506.533 433.928 506.8C436.728 510.533 438.528 512.733 439.328 513.4ZM542.214 449C539.947 448.2 537.514 447.633 534.914 447.3C533.247 447.033 531.38 446.9 529.314 446.9H511.814H508.814H497.514V448.8H499.714C501.114 448.867 502.514 449.467 503.914 450.6C505.38 451.733 506.114 453.4 506.114 455.6V511.6C506.047 512.933 505.714 514.1 505.114 515.1C504.514 516.033 503.814 516.667 503.014 517C502.214 517.333 501.38 517.633 500.514 517.9C499.647 518.1 498.947 518.167 498.414 518.1C497.947 518.033 497.68 518.033 497.614 518.1V520H506.114H515.114H523.914C527.047 520 530.047 519.8 532.914 519.4C535.847 518.933 539.114 517.933 542.714 516.4C546.38 514.8 549.514 512.733 552.114 510.2C554.78 507.667 557.047 504.033 558.914 499.3C560.847 494.5 561.88 488.933 562.014 482.6C562.147 477.467 561.647 472.867 560.514 468.8C559.38 464.733 557.914 461.467 556.114 459C554.314 456.533 552.114 454.433 549.514 452.7C546.98 450.967 544.547 449.733 542.214 449ZM541.614 513.3C539.68 514.7 537.18 515.867 534.114 516.8C531.114 517.733 527.714 518.2 523.914 518.2C522.314 518.2 521.147 518.167 520.414 518.1C519.747 518.033 518.914 517.833 517.914 517.5C516.98 517.1 516.28 516.433 515.814 515.5C515.414 514.5 515.18 513.2 515.114 511.6V454.9C515.247 453.033 515.814 451.633 516.814 450.7C517.814 449.7 518.814 449.133 519.814 449C520.88 448.8 522.38 448.7 524.314 448.7H525.414C526.48 448.767 527.68 448.867 529.014 449C530.414 449.067 531.98 449.333 533.714 449.8C535.514 450.267 537.214 450.933 538.814 451.8C540.48 452.667 542.114 453.967 543.714 455.7C545.38 457.367 546.814 459.4 548.014 461.8C549.28 464.133 550.28 467.167 551.014 470.9C551.747 474.567 552.114 478.733 552.114 483.4C552.114 485.533 552.08 487.367 552.014 488.9C551.947 490.433 551.714 492.5 551.314 495.1C550.98 497.7 550.447 499.933 549.714 501.8C549.047 503.667 548.014 505.7 546.614 507.9C545.214 510.1 543.547 511.9 541.614 513.3ZM649.482 520V499.5H647.082C647.082 502.1 646.916 504.4 646.582 506.4C646.249 508.333 645.616 510.233 644.682 512.1C643.749 513.967 642.316 515.4 640.382 516.4C638.449 517.4 636.049 517.9 633.182 517.9H622.082C616.682 517.9 613.849 515.867 613.582 511.8V484.2H621.082C624.749 484.333 627.182 485.567 628.382 487.9C629.582 490.233 630.182 493.4 630.182 497.4H631.982V468.8H630.182C630.182 470.667 630.049 472.3 629.782 473.7C629.582 475.1 629.182 476.467 628.582 477.8C627.982 479.133 627.016 480.2 625.682 481C624.349 481.733 622.682 482.133 620.682 482.2H613.582V455.1C613.849 450.967 616.682 448.9 622.082 448.9H630.682C633.549 448.9 635.949 449.3 637.882 450.1C639.816 450.9 641.249 452.1 642.182 453.7C643.116 455.3 643.749 457 644.082 458.8C644.416 460.6 644.582 462.767 644.582 465.3H646.982V446.9H641.182H622.082H613.582H604.582H595.982V448.3L597.982 448.4C599.382 448.533 600.782 449.2 602.182 450.4C603.649 451.533 604.449 453.2 604.582 455.4V512C604.449 513.267 604.049 514.367 603.382 515.3C602.716 516.233 602.016 516.9 601.282 517.3C600.549 517.7 599.716 518.033 598.782 518.3C597.849 518.5 597.182 518.6 596.782 518.6H595.982V520H604.582H649.482ZM722.214 488.4C718.547 484.067 713.38 480.267 706.714 477C702.514 474.933 699.18 472.7 696.714 470.3C694.247 467.833 692.714 465.7 692.114 463.9C691.514 462.1 691.347 460.267 691.614 458.4C691.88 456.533 692.147 455.3 692.414 454.7C692.747 454.1 693.047 453.633 693.314 453.3C694.38 451.833 695.58 450.567 696.914 449.5C699.914 447.3 703.914 446.9 708.914 448.3C711.047 448.967 712.58 449.667 713.514 450.4C714.514 451.133 715.48 452.133 716.414 453.4C717.747 455.2 718.947 457.533 720.014 460.4C720.88 463.067 721.347 465.367 721.414 467.3H723.714V457.7L723.914 446H721.914L721.714 447.4C721.447 448.467 721.08 449.3 720.614 449.9C719.68 451.167 717.914 450.933 715.314 449.2C713.247 447.867 711.08 446.9 708.814 446.3C707.48 445.9 705.847 445.633 703.914 445.5H703.614C702.414 445.5 701.514 445.533 700.914 445.6C698.247 445.933 695.714 446.633 693.314 447.7C689.714 449.433 687.147 451.9 685.614 455.1C684.28 457.9 683.747 461.3 684.014 465.3L684.114 466.4C684.114 467.133 684.314 468.133 684.714 469.4C685.114 470.6 685.647 471.933 686.314 473.4C687.047 474.8 688.18 476.3 689.714 477.9C691.314 479.5 693.147 480.9 695.214 482.1C698.88 484.233 701.814 486.033 704.014 487.5C706.214 488.9 708.68 490.733 711.414 493C714.147 495.2 716.08 497.433 717.214 499.7C718.414 501.967 718.814 504.3 718.414 506.7C717.947 509.767 716.847 512.467 715.114 514.8C713.38 517.067 711.114 518.467 708.314 519C706.18 519.467 703.98 519.5 701.714 519.1C701.114 519.033 700.147 518.8 698.814 518.4C697.014 517.8 695.614 517.1 694.614 516.3C693.48 515.433 692.48 514.433 691.614 513.3C690.08 511.3 688.847 509 687.914 506.4C686.714 503.133 686.047 499.733 685.914 496.2V495.8H683.614L683.714 508.6L683.514 520.6H685.414L685.714 519.1C686.114 517.7 686.58 516.733 687.114 516.2C687.847 515.6 688.814 515.567 690.014 516.1C690.28 516.233 691.347 516.9 693.214 518.1C694.147 518.7 695.214 519.2 696.414 519.6C698.48 520.467 700.78 521 703.314 521.2C705.18 521.467 707.58 521.4 710.514 521C714.247 520.333 717.38 519.133 719.914 517.4C723.78 514.733 726.18 511.133 727.114 506.6C727.514 504.8 727.714 503.033 727.714 501.3C727.714 496.967 725.88 492.667 722.214 488.4ZM785.87 518.6H786.77V520H760.67V518.6L762.47 518.5C763.603 518.433 764.837 517.967 766.17 517.1C767.57 516.233 768.503 515 768.97 513.4C769.17 512.733 769.27 512.067 769.27 511.4V451.1C769.27 450.7 769.203 450.1 769.07 449.3C768.737 448.233 768.37 447.433 767.97 446.9L778.27 453.4V511.5C778.337 512.9 778.67 514.1 779.27 515.1C779.937 516.1 780.637 516.833 781.37 517.3C782.103 517.7 782.937 518.033 783.87 518.3C784.87 518.5 785.537 518.6 785.87 518.6ZM883.407 488.6C881.807 488.8 879.673 488.9 877.007 488.9H865.707L858.107 488.6V490.7C861.307 490.833 863.573 491.133 864.907 491.6C867.173 492.733 868.307 494.9 868.307 498.1L868.507 508.4V510.6V511.5C868.373 512.433 868.173 513.2 867.907 513.8C867.44 514.667 866.673 515.467 865.607 516.2L865.307 516.4C862.107 518.133 858.907 519.133 855.707 519.4H854.807C852.74 519.4 851.007 519.267 849.607 519C842.073 517.267 836.54 511.033 833.007 500.3C830.607 493.167 829.773 485.733 830.507 478C831.373 468.267 833.74 460.733 837.607 455.4C840.54 451.467 844.173 448.933 848.507 447.8C849.773 447.533 851.273 447.4 853.007 447.4C857.94 447.4 862.573 448.833 866.907 451.7C868.173 452.567 869.273 453.567 870.207 454.7C871.407 456.1 872.307 457.467 872.907 458.8C874.107 461.2 875.04 464.5 875.707 468.7C875.84 469.5 875.907 470.1 875.907 470.5V470.6H878.407V470.5V470.1C878.407 459.1 878.54 451.367 878.807 446.9H876.407V447.4L876.107 449.2C875.84 450.4 875.507 451.333 875.107 452C874.84 452.4 874.573 452.667 874.307 452.8C873.84 453.2 873.007 452.967 871.807 452.1C869.673 450.633 867.94 449.533 866.607 448.8C865.34 448 863.507 447.233 861.107 446.5C858.773 445.767 856.24 445.4 853.507 445.4C851.507 445.4 850.007 445.467 849.007 445.6C848.34 445.733 847.873 445.8 847.607 445.8C843.54 446.533 839.84 447.9 836.507 449.9C825.373 456.433 819.807 468.067 819.807 484.8C819.807 487.733 820.04 490.567 820.507 493.3C822.04 502.7 825.873 509.833 832.007 514.7C837.473 519.3 844.373 521.6 852.707 521.6H853.007C853.273 521.6 853.673 521.567 854.207 521.5H855.407C860.607 521.167 865.44 519.3 869.907 515.9C871.507 514.7 872.64 514.1 873.307 514.1C874.107 514.1 874.74 514.767 875.207 516.1C875.74 517.367 876.04 518.667 876.107 520H879.007L878.707 507L878.807 495.6V495.2C878.807 493.133 879.507 491.767 880.907 491.1C881.84 490.833 882.673 490.7 883.407 490.7V488.6ZM982.294 446.9H962.394V448.3L964.694 448.4C966.161 448.533 967.661 449.2 969.194 450.4C970.727 451.6 971.561 453.3 971.694 455.5V503.9L934.894 446.9H917.494V448.6H919.494C920.827 448.667 922.194 449.233 923.594 450.3C925.061 451.367 925.861 452.967 925.994 455.1V511.3C925.994 512.1 925.961 512.667 925.894 513C925.628 514.133 925.128 515.1 924.394 515.9C923.727 516.633 923.027 517.167 922.294 517.5C921.628 517.833 920.861 518.1 919.994 518.3C919.128 518.5 918.527 518.6 918.194 518.6H917.494V520H936.594V518.6L934.794 518.5C933.594 518.433 932.294 517.967 930.894 517.1C929.494 516.167 928.594 514.833 928.194 513.1C928.061 512.3 927.994 511.7 927.994 511.3V452.8L971.394 520H973.694V455.4C973.761 454 974.094 452.8 974.694 451.8C975.361 450.8 976.061 450.1 976.794 449.7C977.594 449.233 978.461 448.9 979.394 448.7C980.394 448.433 981.061 448.3 981.394 448.3H982.294V446.9Z" fill="#252424"/>
<defs>
<mask id="mymask">
<rect width="100%" height="100%" fill="white"/>
<text x="320" y="140" text-anchor="middle" font-size="40px" >Some transparent text</text>
<text x="320" y="190" text-anchor="middle" font-size="40px" >has been placed here</text>
<rect x="220" y="300" width="200" height="50" fill="black"/>
<text x="320" y="335" text-anchor="middle" fill="white" font-size="30px">BUTTON</text>
</mask>
</defs>
<rect fill="black" fill-opacity="0.7" width="100%" height="100%" mask="url(#mymask)"/>
</svg>
In SVG you can draw rectangle with a hole by drawing the rectangle in one direction and the hole the other way round.
<svg viewBox="0 0 100 50">
<path d="M0,0v50h100v-50h-100
M10,10h80v30h-80v-30"/>
</svg>
If for some reason you can't do that you can use fill-rule="evenodd"
<svg viewBox="0 0 100 50">
<path d="M0,00h100v50h-100v-50
M10,10h80v30h-80v-30" fill-rule="evenodd"/>
</svg>
Apparently this is what they are doing at axcapital. I suppose they used illustrator or another editor to draw the paths for the letters.
For example this is the code to draw the X:
svg{width:200px;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="300 350 200 200" >
<path id="X" d="M439.328 513.4C441.061 514.733 443.461 515.533 446.528 515.8V520H399.728V515.8L404.328 515.6C410.995 515.467 414.328 514.4 414.328 512.4C414.328 511.467 413.528 509.733 411.928 507.2L377.728 454.8L371.528 463.8C367.528 469.8 363.195 476.267 358.528 483.2C353.995 490.133 351.195 494.6 350.128 496.6L349.328 498.2C347.995 501.4 347.328 504 347.328 506C347.328 512.267 353.461 515.6 365.728 516V520H320.328V516C324.995 515.2 329.461 512.8 333.728 508.8C335.461 507.333 337.861 504.6 340.928 500.6L374.928 450.4L332.528 385.6C331.461 384 330.795 382.933 330.528 382.4C328.928 379.733 327.528 377.8 326.328 376.6C325.261 375.533 323.795 374.6 321.928 373.8H346.928L386.728 435L409.928 401.8C414.595 395.267 416.928 390.067 416.928 386.2C416.928 381.533 412.928 378.8 404.928 378H404.528H403.728H402.728H401.728C401.328 377.867 401.061 377.8 400.928 377.8V373.8H442.328V377.8C434.595 378.867 426.795 385.2 418.928 396.8L389.928 440L431.528 503.2V503.4C432.861 505.4 433.661 506.533 433.928 506.8C436.728 510.533 438.528 512.733 439.328 513.4Z" fill="#252424"/>
</svg>
In order to make it a hole you need a path with a d attribute drawing first a rectangle M300,350h200v200h-200v-200 and next the X like so:
body{background:gold;}
svg{width:200px;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="300 350 200 200" width="300" >
<path id="X" fill-rule="evenodd" d="
M300,350h200v200h-200v-200
M439.328 513.4C441.061 514.733 443.461 515.533 446.528 515.8V520H399.728V515.8L404.328 515.6C410.995 515.467 414.328 514.4 414.328 512.4C414.328 511.467 413.528 509.733 411.928 507.2L377.728 454.8L371.528 463.8C367.528 469.8 363.195 476.267 358.528 483.2C353.995 490.133 351.195 494.6 350.128 496.6L349.328 498.2C347.995 501.4 347.328 504 347.328 506C347.328 512.267 353.461 515.6 365.728 516V520H320.328V516C324.995 515.2 329.461 512.8 333.728 508.8C335.461 507.333 337.861 504.6 340.928 500.6L374.928 450.4L332.528 385.6C331.461 384 330.795 382.933 330.528 382.4C328.928 379.733 327.528 377.8 326.328 376.6C325.261 375.533 323.795 374.6 321.928 373.8H346.928L386.728 435L409.928 401.8C414.595 395.267 416.928 390.067 416.928 386.2C416.928 381.533 412.928 378.8 404.928 378H404.528H403.728H402.728H401.728C401.328 377.867 401.061 377.8 400.928 377.8V373.8H442.328V377.8C434.595 378.867 426.795 385.2 418.928 396.8L389.928 440L431.528 503.2V503.4C432.861 505.4 433.661 506.533 433.928 506.8C436.728 510.533 438.528 512.733 439.328 513.4Z" fill="#252424"/>
</svg>
Please observe that the path has fill-rule="evenodd".
i need to help for design a shape for footer in project similar to this image. please help me.
How is designing shape similar to waves with html and css. with border-radius is possible or with SVG?
Is it possible to be responsive?
my svg code:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100%" height="200px" viewBox="0 0 1366 432"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,432.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1710 l0 -1710 10000 0 10000 0 0 114 0 113 -127 100 c-833 653
-1848 1155 -2883 1427 -681 179 -1808 322 -3055 388 -328 18 -1972 18 -2340 0
-1091 -51 -1781 -111 -3645 -317 -1898 -209 -2407 -249 -3230 -249 -682 -1
-1004 26 -1490 125 -1101 225 -2207 812 -2996 1590 l-131 129 -51 0 -52 0 0
-1710z"/>
</g>
</svg>
but it not fullwith. try it
Update your SVG file. Change:
preserveAspectRatio="xMidYMid meet"
to
preserveAspectRatio="none"
Likely tricky to pull that off with pure css. I would try using a CSS shape builder tool online if you truly want to use CSS.
Make this will help? http://html-generator.weebly.com/css-shape-generator.html#y