I've got a problem with an SVG image.
The following code works in all browser but not in safari mobile.
(I use IOS Simulator).
Do you know why? I've not find a solution because all other images I've seen works with the same syntax.
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="150px" height="125px" viewBox="0 0 150 125" enable-background="new 0 0 150 125" xml:space="preserve">
<path fill="none" stroke="#E26161" d="M1.295,1"/>
<path fill="none" stroke="#E26161" d="M1.295,125"/>
<path fill="none" stroke="#000000" d="M-9.681-16.75"/>
<path fill="none" stroke="#000000" d="M93.751,21.722"/>
<path fill="none" stroke="#000000" d="M151.887,123.541"/>
<path fill="none" stroke="#000000" d="M77.072,62.437"/>
<path fill="none" stroke="#000000" d="M2.328,1.391"/>
<path fill="none" stroke="#E26161" d="M77.072,62.437"/>
<path fill="none" stroke="#E26161" d="M1.295,0.667"/>
<line fill="none" stroke="#E26161" x1="149.043" y1="125" x2="149.043" y2="0"/>
<line fill="none" stroke="#E26161" x1="75.022" y1="62.5" x2="149.043" y2="0"/>
<line fill="none" stroke="#111111" x1="1" y1="124.938" x2="75.022" y2="62.437"/>
<line fill="none" stroke="#E26161" x1="1" y1="0" x2="75.28" y2="62.906"/>
<line fill="none" stroke="#E26161" x1="1" y1="125" x2="1" y2="0"/>
</svg>
It looks like you have an invisible U+200B character at the end of your closing </svg>. Remove it and it should work.
Related
My application consists of a tailwind navigation bar that is displayed on all screens in desktop format, but when changing to mobile format only want to display the bar in the main views (home, school, documentation and profile), the other screens of the mobile version consists of a navigation by arrows return screen and has not to display the navigation bar, I need ideas on how to do this because I have a major blockage, I know I must pass the component by redux and the store but I do not know how or where to start, ideas please.
import React from 'react'
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '#headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '#heroicons/react/24/outline'
const navigation = [
{ name: 'Inicio', href: '#', current: true },
{ name: 'Colegio', href: '#', current: false },
{ name: 'Documentos', href: '#', current: false },
{ name: 'Mi perfil', href: '#', current: false },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export function Navigation() {
return (
<div>
<nav className="md:bg-white bg-teal-600 w-100 md:shadow">
<div className="mx-auto max-w-100 px-4 sm:px-6 lg:px-8">
<div className="relative flex h-16 items-center justify-between">
<div className="flex flex-1 items-center justify-start sm:items-stretch sm:justify-start">
<div className="flex flex-shrink-0 items-center">
{/* <img className="block h-9 w-auto md:hidden" src="../logo-icofcv-white.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" /> */}
<img className="hidden h-9 w-auto md:block" src="../logo-icofcv.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" />
</div>
<div className="hidden sm:ml-6 md:block">
<div className="flex space-x-1 desktop-navigation">
<a href="/#/" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
Inicio</a>
<a href="/#/college" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="3" y1="21" x2="21" y2="21" />
<path d="M5 21v-14l8 -4v18" />
<path d="M19 21v-10l-6 -4" />
<line x1="9" y1="9" x2="9" y2="9.01" />
<line x1="9" y1="12" x2="9" y2="12.01" />
<line x1="9" y1="15" x2="9" y2="15.01" />
<line x1="9" y1="18" x2="9" y2="18.01" />
</svg>
Colegio</a>
<a href="/#/docs" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 3v4a1 1 0 0 0 1 1h4" />
<path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
<path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
</svg>
Documentación</a>
<a href="/#/profile" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
Mi perfil</a>
</div>
</div>
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<ul className="items-center hidden md:flex">
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://twitter.com/Icofcv" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-twitter" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
</svg>
</a>
</li>
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://www.youtube.com/channel/UCYDxDmCQ_xfzk0ZnAkMt2WQ?view_as=subscriber" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-youtube" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<rect x="3" y="5" width="18" height="14" rx="4" />
<path d="M10 9l5 3l-5 3z" />
</svg>
</a>
</li>
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://www.instagram.com/icofcv/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-instagram" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<rect x="4" y="4" width="16" height="16" rx="4" />
<circle cx="12" cy="12" r="3" />
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
</svg>
</a>
</li>
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://www.facebook.com/colegiofisioterapeutascv" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-facebook" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
{/* Navegación móvil */}
<div className="fixed bottom-2 w-100 h-14 flex justify-around items-center md:hidden bg-white nav-phone pt-2">
<button className="flex flex-column items-center active">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
<span className="btm-nav-label">Inicio</span>
</button>
<button className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="3" y1="21" x2="21" y2="21" />
<path d="M5 21v-14l8 -4v18" />
<path d="M19 21v-10l-6 -4" />
<line x1="9" y1="9" x2="9" y2="9.01" />
<line x1="9" y1="12" x2="9" y2="12.01" />
<line x1="9" y1="15" x2="9" y2="15.01" />
<line x1="9" y1="18" x2="9" y2="18.01" />
</svg>
<span className="btm-nav-label">Colegio</span>
</button>
<button className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 3v4a1 1 0 0 0 1 1h4" />
<path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
<path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
</svg>
<span className="btm-nav-label">Documentación</span>
</button>
<button className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
<span className="btm-nav-label">Mi perfil</span>
</button>
</div>
</div>
)
}
Im using react, Trying to convert an SVG to jsx and all seems pretty well however all of my svgs have an enable-background property
style="enable-background:new 0 0 473.806 473.806;"
Which im having trouble converting to JSX
Im currently using
style={{enableBackground:'new 0 0 387.2 387.2'}}
Which doesnt work, I would just use an img tag however i want to change the color of the SVG on hover.
Update: heres the SVG
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="35px" height="35px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
<g>
<path d="M25.302,0H9.698c-1.3,0-2.364,1.063-2.364,2.364v30.271C7.334,33.936,8.398,35,9.698,35h15.604
c1.3,0,2.364-1.062,2.364-2.364V2.364C27.666,1.063,26.602,0,25.302,0z M15.004,1.704h4.992c0.158,0,0.286,0.128,0.286,0.287
c0,0.158-0.128,0.286-0.286,0.286h-4.992c-0.158,0-0.286-0.128-0.286-0.286C14.718,1.832,14.846,1.704,15.004,1.704z M17.5,33.818
c-0.653,0-1.182-0.529-1.182-1.183s0.529-1.182,1.182-1.182s1.182,0.528,1.182,1.182S18.153,33.818,17.5,33.818z M26.021,30.625
H8.979V3.749h17.042V30.625z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Removing the style="enable-background..." works fine. See below.
If yours fails, then you are doing something else wrong somewhere.
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="35px" height="35px" viewBox="0 0 35 35" xml:space="preserve">
<g>
<path d="M25.302,0H9.698c-1.3,0-2.364,1.063-2.364,2.364v30.271C7.334,33.936,8.398,35,9.698,35h15.604
c1.3,0,2.364-1.062,2.364-2.364V2.364C27.666,1.063,26.602,0,25.302,0z M15.004,1.704h4.992c0.158,0,0.286,0.128,0.286,0.287
c0,0.158-0.128,0.286-0.286,0.286h-4.992c-0.158,0-0.286-0.128-0.286-0.286C14.718,1.832,14.846,1.704,15.004,1.704z M17.5,33.818
c-0.653,0-1.182-0.529-1.182-1.183s0.529-1.182,1.182-1.182s1.182,0.528,1.182,1.182S18.153,33.818,17.5,33.818z M26.021,30.625
H8.979V3.749h17.042V30.625z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
hi i have svg path where i am placing an image https://i.imgur.com/NFhr6hq.jpg from . when i place its just display in center of path and not filling others area as following my desired image https://i.imgur.com/tdjZpKh.jpg
how i can place image on wall as tiles ?
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image x="0" y="0" xlink:href="stile.jpg" width="100" height="100" />
</pattern>
</defs>
<path d="M 752 180 v 192 h 215 V 145 L 752 180 Z M 916 358 l -130 0.246 v -78.369 L 916 270 V 358 Z"/>
</path>
<script>
jQuery(function($){
$('path').click(function(){
this.style.fill = "url(#img1)";
alert(this.id);
});
});
</script>
when i click on path with jquery am applying image on it
The problem is that your image has white borders. If you want to use that image you need to put the image inside a symbol with a viewBox that is cropping the white border of the image like so:
<svg width="100%" height="100%" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="s" viewBox="2.5 2.5 38 35">
<image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg" width="48" height="45" />
</symbol>
<pattern id="img1" patternUnits="userSpaceOnUse" width="30" height="30">
<use xlink:href="#s" width="30" height="30" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#img1)" />
</svg>
Alternatively you may use a different image with no white borders and in this case you may use the #Alexandr_TT's solution.
UPDATE:
The OP is commenting:
i have updatted question, there i have no rect but path . when i click on path , jquery update path fill area with image
In this case instead of filling the rect you fill the path like so:
<svg viewBox="750 145 230 230" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="s" viewBox="3.1 2.5 38 35">
<image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg" width="48" height="45" />
</symbol>
<pattern id="img1" patternUnits="userSpaceOnUse" width="38" height="35">
<use xlink:href="#s" width="38" height="35" />
</pattern>
</defs>
<!--<rect width="100%" height="100%" fill="url(#img1)" />-->
<path d="M 752 180 v 192 h 215 V 145 L 752 180 Z M 916 358 l -130 0.246 v -78.369 L 916 270 V 358 Z" fill="url(#img1)"/>
</svg>
Pattern filling any shape
<rect width="100%" height="100%" fill="url(#img1)" />
<svg width="100%" height="100%" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg" width="100px" height="100px" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#img1)" />
</svg>
Update
Tile Fill Path
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="25" height="25">
<image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg" width="25px" height="25px" />
</pattern>
</defs>
<path stroke="gray" fill="url(#img1)" transform="translate(-700 -100)" d="M 752 180 v 192 h 215 V 145 L 752 180 Z M 916 358 l -130 0.246 v -78.369 L 916 270 V 358 Z" />
</svg>
Here's one of my original SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M34.2,19h-4l-0.6-2.5c-0.2-0.9-1-1.5-1.9-1.5h-3.9c-0.9,0-1.7,0.6-1.9,1.5L21.3,19h-4c-1.7,0-3,1.3-3,3v12
c0,0.6,0.4,1,1,1h21c0.6,0,1-0.4,1-1V22C37.2,20.3,35.9,19,34.2,19z"/>
<rect x="17.2" y="17" class="st0" width="2" height="2"/>
<path class="st0" d="M27.2,19h-3c-0.6,0-1-0.4-1-1l0,0c0-0.6,0.4-1,1-1h3c0.6,0,1,0.4,1,1l0,0C28.2,18.6,27.8,19,27.2,19z"/>
<circle class="st0" cx="25.7" cy="27.5" r="5.5"/>
<circle class="st0" cx="25.7" cy="27.5" r="3.5"/>
<circle class="st0" cx="34.2" cy="22" r="1"/>
<path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/>
</g>
</svg>
Open it in a browser like Safari, and the image shows correctly:
Now I'm creating an SVG containing two SVGs using defs and symbol - one of them is the one I've shown here above, the other is a similar one:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<defs>
<symbol viewBox="0 0 50 50" id="videographer">
<style type="text/css">
.st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<circle class="st0" cx="21" cy="19.5" r="2.5"/>
<circle class="st0" cx="26" cy="19.5" r="2.5"/>
<polyline class="st0" points="33.5,27.8 37.5,31 37.5,23 33.5,26.2 "/>
<rect x="30.5" y="25" class="st0" width="3" height="4"/>
<rect x="14.5" y="24" class="st0" width="2" height="6"/>
<rect x="16.5" y="22" class="st0" width="14" height="10"/>
</g>
</symbol>
<symbol viewBox="0 0 50 50" id="photographer">
<style type="text/css">
.st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M34.2,19h-4l-0.6-2.5c-0.2-0.9-1-1.5-1.9-1.5h-3.9c-0.9,0-1.7,0.6-1.9,1.5L21.3,19h-4c-1.7,0-3,1.3-3,3v12
c0,0.6,0.4,1,1,1h21c0.6,0,1-0.4,1-1V22C37.2,20.3,35.9,19,34.2,19z"/>
<rect x="17.2" y="17" class="st0" width="2" height="2"/>
<path class="st0" d="M27.2,19h-3c-0.6,0-1-0.4-1-1l0,0c0-0.6,0.4-1,1-1h3c0.6,0,1,0.4,1,1l0,0C28.2,18.6,27.8,19,27.2,19z"/>
<circle class="st0" cx="25.7" cy="27.5" r="5.5"/>
<circle class="st0" cx="25.7" cy="27.5" r="3.5"/>
<circle class="st0" cx="34.2" cy="22" r="1"/>
<path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/>
</g>
</symbol>
</defs>
</svg>
My React code to import that SVG and render it...
import VendorIcons from '../../images/vendor_icons.svg';
const VendorIcon = props => {
return (
<svg version="1.1" id="Layer_1" x="0px" y="0px"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink">
<use xlinkHref={`${VendorIcons}#${props.icon}`} />
</svg>
)
};
Code to render it:
<VendorIcon icon={"videographer"}/>
And this is how it renders, without style:
Why is this happening? why is the style lost? Can this be fixed?
It should work fine if you have change the styles in vendor_icons.svg to presentation attributes rather than CSS in a style tag. It looks like you are using Adobe Illustrator, so you should be able to change the SVG export settings to do this for you. The result will be something like:
<symbol viewBox="0 0 50 50" id="videographer">
<g>
<circle fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" cx="21" cy="19.5" r="2.5"/>
<circle fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" cx="26" cy="19.5" r="2.5"/>
<polyline fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" points="33.5,27.8 37.5,31 37.5,23 33.5,26.2 "/>
<rect x="30.5" y="25" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="3" height="4"/>
<rect x="14.5" y="24" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="2" height="6"/>
<rect x="16.5" y="22" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="14" height="10"/>
</g>
</symbol>
Result using the component as you’ve written it:
Can anyone help me identify why my text is not rendering in the defined path #textPath03 ? The path is rendered as supposed, but when I put it inside a <defs> and try to use it, it doesn`t work.
<svg version="1.1" height="700" width="700" viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-reactid="13">
<defs data-reactid="14">
<path id="#textPath03" d="M95,50 A45,45 0 0 0 50,5" data-reactid="15"></path>
</defs>
<line x1="50" y1="50" x2="100" y2="50" stroke="black" data-reactid="16"></line>
<line x1="50" y1="50" x2="50" y2="0" stroke="black" data-reactid="17"></line>
<path d="M90,50 A40,40 0 0 0 50,10" fill="none" stroke="green" data-reactid="18"></path>
<use xlink:href="#textPath03" fill="none" stroke="red" data-reactid="19"></use>
<text x="2" y="40%" font-size="20" data-reactid="20">
<textPath xlink:href="#textPath03" data-reactid="21">Teste</textPath>
</text>
</svg>
This is a REACT rendered SVG.
Thanks!!
The path id contains an extraneous # character. Only the reference to the path should have that. Removing it fixes your example...
<svg version="1.1" height="700" width="700" viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-reactid="13">
<defs data-reactid="14">
<path id="textPath03" d="M95,50 A45,45 0 0 0 50,5" data-reactid="15"></path>
</defs>
<line x1="50" y1="50" x2="100" y2="50" stroke="black" data-reactid="16"></line>
<line x1="50" y1="50" x2="50" y2="0" stroke="black" data-reactid="17"></line>
<path d="M90,50 A40,40 0 0 0 50,10" fill="none" stroke="green" data-reactid="18"></path>
<use xlink:href="#textPath03" fill="none" stroke="red" data-reactid="19"></use>
<text x="2" y="40%" font-size="20" data-reactid="20">
<textPath xlink:href="#textPath03" data-reactid="21">Teste</textPath>
</text>
</svg>