This React Component show SVG in Firefox but not in Chrome. What's wrong here?
In FireFOx it works responsibly but in Chrome it not even show
return (
<div className="map">
<svg viewBox="0 0 531 724" version="1.1" x="0px" y="0px">
<defs>
</defs>
<g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dashboard-Home" transform="translate(8.000000, -200.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="Map-Box" transform="translate(0.000000, 217.000000)">
<g id="Map" transform="translate(43.000000, 40.000000)">
<g id="map_bd_full">
<g
id="div_rjs" className="division" transform="translate(0.000000, 150.000000)" onClick={() => this.props.updateSelectedArea('rajshahi')}>
<polygon id="Path" points="33.7753119 93.0137193 34.9672785 90.2646875 32.1855967 86.7298535 32.5830255 81.624372 30.1990922 78.8753401 30.5962012 75.7334072 38.5434982 73.3769576 43.3116846 71.0205079 42.9142558 67.878575 50.464124 68.271476 51.6564104 67.0930917 50.464124 65.1295431 48.4772997 66.3076085 45.6959376 64.736642 50.8615528 61.9876102 56.8220255 63.9511588 57.2191346 67.0930917 59.6033876 67.878575 61.9876407 65.1295431 63.9744649 66.7005096 63.5770361 71.0205079 67.1532558 72.5914743 75.8950907 67.878575 75.4976619 67.0930917 79.8687392 68.6640582 82.2526725 70.6279257 85.4317831 70.2350246 88.2131452 72.9843754 91.3919361 71.8059911 91.3919361 75.7334072 91.7893649 77.6969559 94.9681558 79.2679223 96.9549801 79.2679223 96.9549801 81.624372 96.1601225 83.5879206 91.7893649 83.9808217 89.4051119 85.9443703 90.9945073 85.9443703 93.3787604 88.30082 89.8025407 91.0501707 90.1999695 93.0137193 90.1999695 93.0137193 90.5973983 103.617583 86.6237498 106.366615 85.8288922 107.545 85.8288922 107.545 87.8157164 111.472416 90.9945073 110.686933 91.3919361 113.043063 92.1867937 115.006931 93.3787604 116.184996 88.2131452 118.148864 86.6237498 119.71983 88.610574 121.290797 86.226321 122.468862 87.8157164 123.646927 86.226321 124.825312 90.5973983 125.610795 91.3919361 127.181761 88.2131452 127.967245 87.8157164 129.538211 83.8420679 129.538211 78.2793437 127.181761 74.703124 124.039828 73.1134088 123.254345 70.3320467 122.468862 70.3320467 120.897896 73.5108376 120.112412 73.9082664 111.864998 71.1269043 105.974033 67.9477937 105.581132 66.3583982 107.937582 60.3982452 107.545 56.8220255 105.581132 54.0403437 107.937582 50.464124 105.974033 46.8879043 102.439518 45.2985088 102.8321 44.90108 100.868552 41.3248603 100.083068 37.3515316 98.1192009"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
)
}
Related
I have an SVG of a map that I want to add a link to in React to the path tag.
<svg viewBox="0 0 777.74173 413.26299"
version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="prov00p36">
<clipPath id="SVG_CP_1">
<path d="M0,0L0,413.26299L777.74173,413.26299L777.74173,0L0,0z" />
</clipPath
<path clipPath="url(#SVG_CP_1)" fill="#E8BEFF" fillRule="evenodd"
stroke="none" d="M248.39427,287.05972L247.4343,286.57968
L247.1943,285.61962L248.39427,286.09965L248.39427,287.05972z"
/>
</g>
</svg>
Can I add a tag in the html? or do I have to create a function?
I want to use JavaScript SVG as an icon. However, I keep getting this error. I fixed one error by changing xmls:xlink into xmlsXlink. However, it did not work same for xml:space.
SVG code
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 85 85"
style="enable-background:new 0 0 85 85;"
xml:space="preserve"
>
<polygon
class="st0"
points="6.3,1.2 13,75.4 42.4,83.8 72.1,75.4 78.9,1.2"
fill="#FFF"
/>
<g>
<g transform="translate(4.988 -113.385)">
<path
d="M7.1,189.8l-6.9-76.4H75l-7,76.4l-30.6,8.6L7.1,189.8z M62.4,185.6l5.8-65.5H37.6l0.2,72.2 L62.4,185.6z M34.7,129.8h-7.4L27.2,169l-14.5-4v9l21.9,5.9L34.7,129.8L34.7,129.8z"
fill="#D4B830"
/>
<path
d="M32.3,179.2c-1-0.3-5.7-1.6-10.6-2.9l-8.8-2.4v-4.4c0-4.3,0-4.4,0.4-4.3 c0.2,0.1,3.4,1,7.1,2l6.7,1.8l0.1-19.5l0.1-19.5h7.3v24.9c0,19.7-0.1,24.9-0.3,24.9C34.2,179.7,33.2,179.4,32.3,179.2L32.3,179.2z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0"
enable-background="new"
/>
<path
d="M12.8,174v-9c0,0,9.2,2.6,14.4,3.9l0.1-39.1h7.4v50.1L12.8,174L12.8,174z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0.9216"
enable-background="new"
/>
<path
d="M37.6,120.2h30.6l-5.8,65.5l-24.8,6.7V120.2z M60.8,174.6l2-24.5L48,151.8v-13.1l15.9-0.1 l0.6-8.9l-23.9,0.1l0.3,32.5l14.5-2.5l-0.2,7.2l-14.7,4l0.1,8.9L60.8,174.6L60.8,174.6z"
fill="#FDD83C"
/>
</g>
</g>
</svg>
You've no text in the file so just remove the xml:space attribute altogether.
In vue I can duplicate one svg file several times like v-for="i in 5":key="i". How can I do it in React?
<svg v-for="i in 5":key="i" width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
<title>Star</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Profile-nav" transform="translate(-11.000000, -4.000000)" fill="#F8E71C" stroke="none" stroke-width="2">
<g id="Group-2" transform="translate(0.000000, -1.000000)">
<polygon id="Star" points="29 32.8753882 19.595436 38 21.3915479 27.145898 13.7830957 19.4589803 24.297718 17.8753882 29 8 33.702282 17.8753882 44.2169043 19.4589803 36.6084521 27.145898 38.404564 38"></polygon>
</g>
</g>
</g>
</svg>
You'd do it in a very similar way to how you'd create an array in JavaScript. One option would be to use Array.from with a length, and use the second parameter in the mapper function for the index, eg:
Array.from({ length: 5 }, (_, i) => (
<svg key={i}>
// ...
</svg>
));
const App = () => (
Array.from({ length: 5 }, (_, i) => (
<svg key={i} width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Star</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Profile-nav" transform="translate(-11.000000, -4.000000)" fill="#F8E71C" stroke="none" stroke-width="2">
<g id="Group-2" transform="translate(0.000000, -1.000000)">
<polygon id="Star" points="29 32.8753882 19.595436 38 21.3915479 27.145898 13.7830957 19.4589803 24.297718 17.8753882 29 8 33.702282 17.8753882 44.2169043 19.4589803 36.6084521 27.145898 38.404564 38"></polygon>
</g>
</g>
</g>
</svg>
))
);
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div class='react'></div>
You could do it using `
[...Array(5)].map((_,i)=>{
return <svg key={i} ...>
...
</svg>
})
and replace kebab-case attributes by camelCase ones :
stroke-width ---> strokeWidth
fill-rule ---> fillRule
SVG images aren't showing after a very short time in react. Below I have put that xmlns code
<svg xmlns="http://www.w3.org/2000/svg" width="145.03" height="84.204" viewBox="0 0 145.03 84.204">
<g id="noun_Arrow_2601665" transform="translate(-193.719 -290.21)">
<g id="Group_236" data-name="Group 236" transform="translate(193.719 290.21)">
<path id="Path_213" data-name="Path 213" d="M208.971,292.671l57.18,58.444,57.5-58.444c7.582-
7.9,20.534,5.055,12.636,12.952l-64.762,66.658a7.054,7.054,0,0,1-10.109,0l-65.394-
66.658C188.437,297.726,201.389,284.773,208.971,292.671Z" transform="translate(-193.719 -290.21)"
fill="#fff" fill-rule="evenodd"/>
</g>
</g>
This is how I imported and used this SVGs
import downArrowIcon from '../../../../../assets/icons/left-ar.svg';
<img src={downArrowIcon} alt="DropDownArrow" />
I am trying to use react-dropzone-component in reactjs, Everything works fine but after image is uploaded i want to add the onclick events to preview Template
Below is the config
const djsConfig = { addRemoveLinks: true, params: {
userId: this.props.userId }, previewTemplate:
<div class="dz-preview dz-file-preview" >
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Check</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835
11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915
C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022
L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27
C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27
C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2"
stroke-opacity="0.198794158" stroke="#747474"
fill-opacity="0.816519475" fill="#FFFFFF"
sketch:type="MSShapeGroup"></path>
</g>
</svg>
</div>
<div class="dz-error-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Error</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Check-+-Oval-2" sketch:type="MSLayerGroup" stroke="#747474"
stroke-opacity="0.198794158" fill="#FFFFFF"
fill-opacity="0.816519475">
<path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887
38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915
C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564
L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479
14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271
38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1
1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2"
sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
</div>
</div> };
is there any way i can do it?