CSS changing the path of svg element

Question

I have a generated svg arrow, I want to change it to another shape, I don't know how to generate svg dots. Thats the first shape :

<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="35" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
</svg>
</div>

I want to change it to this shape:

EDIT:: The solution above worked if the code is made by me, but in my case the code is generated and I want to overwrite it in css :

#map_outer svg path{
    d:"M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z" !important;
    stroke-width: 0;
}

I get d: Unknown property name in the browser inspector

I would recommend using an SVG editor. There are plenty of free ones online. — evolutionxbox, Feb 14 '17 at 11:11
@bourax, could you please link me the images on [imgur](http://imgur.com/)? I can't see them with the internet that I'm using. — user7393973, Feb 14 '17 at 11:11
in SVG2, d can be css property. https://www.w3.org/TR/2016/CR-SVG2-20160915/styling.html#PresentationAttributes Chrome supports this. https://css-tricks.com/svg-path-syntax-illustrated-guide/ — defghi1977, Feb 14 '17 at 12:35
Keep in mind that in order for CSS to style the SVG, you have to include the SVG code in the markup, it doesn't work if you include the SVG via the — Vishal, Feb 14 '17 at 12:36
Chome does not support the correct CSS syntax. No other browser currently supports this either. — Robert Longson, Feb 14 '17 at 15:34

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

<svg>
  <path d="M 0 15
           L 35 0
           L 35 8
           L 70 8
           L 70 22
           L 35 22
           L 35 30"
        fill="#FFCC00" />
</svg>

M 0 15 is the starting point (width=0 & height=15px), then you can make your path with the points L and their respective location (width & height). In the end it connects back to the starting point.

Here's a good place to learn about that.

Edit:

Here's your code working as you want without many major changes:

<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="70" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<!--
<path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
-->
<path fill="#ffcc00" stroke="#808080" d="M 0 15 L 35 0 L 35 8 L 70 8 L 70 22 L 35 22 L 35 30 Z" stroke-width="0" stroke-opacity="1" fill-opacity="1" transform="matrix(0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
</svg>
</div>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 14 '17 at 11:29

user7393973

2,270
1
20
58

I mean this didn't work : – user2997418 Feb 14 '17 at 11:34
@bourax, did it displayed anything at all or no image? – user7393973 Feb 14 '17 at 11:34
It didn't display nothing at all – user2997418 Feb 14 '17 at 11:34
The code is generated so I try to overwrite it in CSS file : so I write this : #map_outer svg path{ stroke: rgb(255, 204, 0) !important; fill: rgb(51, 102,153) !important; d:"M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z" !important; transform: ("matrix(0)"); stroke-width: 0; } But I get d and stoke-width invalid propreties !!!! – user2997418 Feb 14 '17 at 12:18
but I can override 'fill' and 'stroke-width' – user2997418 Feb 14 '17 at 12:24
@bourax, I don't get why are you trying to change the code, it's working just fine. What are you trying to acomplish? If anything I can help you with, just let me know. – user7393973 Feb 14 '17 at 12:26
the code is generated by a complex js file, I can't change it, I can only override properties in CSS – user2997418 Feb 14 '17 at 12:27
@bourax, please post your JavaScript code then, because the CSS can't change the style/`d`. – user7393973 Feb 14 '17 at 12:30
I am sure you don't want see it ;) ok, here is the file generating the whole SVG div, one piece of it is generating the arrow, http://simplemaps.com/static/lib/simplemaps/trials/maps/worldmap.js – user2997418 Feb 14 '17 at 12:33
@bourax, why are you using that file, do you really need it for anything else or just for this? – user7393973 Feb 14 '17 at 12:35
I need it for something else – user2997418 Feb 14 '17 at 12:49

Vishal · Answer 2 · 2017-02-14T11:42:56.000

0

I can teach you even if you don't know how to create shapes in svg.

Step-1: Download metro studio here: https://www.syncfusion.com/downloads/metrostudio

step-2: Install it and open it

step-3: Search for Arrow

step-4: Select the icon that satisfy your needs and press edit button on that arrow. For reference take a look at this image:

step-5: Click on code in the bottom left corner as shown in picture below:

step-6: Click on SVG Tab and you will get it.

If you have any other problems then feel free to ask.

Update:

Here is the svg code for arrow:

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
  <g>
    <path id="path1" transform="rotate(0,24,24) translate(11,15.9968754649162) scale(0.8125,0.8125)  " fill="#FFFFFF" d="M13,3.3000036L3,9.8999957 13,16.399996 13,11.300005 29.799988,13.500002 29.799988,6.1999978 13,8.3000039z M15.200012,0L15.200012,6.8999947 32,4.8000039 32,14.899996 15.200012,12.699999 15.200012,19.699999 0,9.8999957z" />
  </g>
</svg>

edited Feb 14 '17 at 11:42

answered Feb 14 '17 at 11:16

Vishal

6,238
10
82
158

could you copy me the data please ? I use Linux – user2997418 Feb 14 '17 at 11:41
@bourax I don't understand why you don't want to install metro studio? Its free. – Vishal Feb 14 '17 at 11:44
This doesn'T work, I just need to change my code, not having a new code – user2997418 Feb 14 '17 at 12:10
@bourex Then just copy the value of `d` property of `path` element from my code to your code and it should work just fine. – Vishal Feb 14 '17 at 12:24
See my update, CSS inspector tells me d is unknown property name – user2997418 Feb 14 '17 at 12:26
@bourax I don't know if its possible in css. But for changing this image at runtime you can use jQuery. – Vishal Feb 14 '17 at 12:33

CSS changing the path of svg element

2 Answers2

Edit: