CSS change d свойство <path>

У меня есть сгенерированный код пути SVG, я хочу переопределить его с помощью CSS-файла, чтобы изменить форму svg. я мог бы переопределить все свойства, кроме «D»:CSS change d свойство <path>

Вот сгенерированный код (я не могу изменить его непосредственно):

<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>

Вот CSS, чтобы переопределить значение d, я получаю

Неизвестный имя свойства

в CSS инспектор !!! :

#map_outer svg path{ 
    fill: rgb(255, 204, 0) !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; 
    stroke-width: 0; 
}

источник

2017-02-14 bourax

Вы не можете сделать это с помощью CSS. CSS не был предназначен для этого. Вам придется использовать JavaScript, а затем процесс становится тривиальным. Если вам нужно использовать селектор CSS для этого, попробуйте jQuery. – Dev

Вы уверены, что пользовательский интерфейс поддерживает d как свойство CSS? Эта ошибка Chrome для него все еще продолжается: https://bugs.chromium.org/p/chromium/issues/detail?id=652822. Я думаю, что вы находитесь за пределами даже кровоточащего края. –

@MuhammadUsman любой способ сделать это в JS или JQuery? – bourax

Вы почти на правильном пути здесь, вам просто нужно установить правильное значение для свойства. Это отсутствует путь ('..'):

#map_outer svg path { 
    d: path('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; 
}

источник

2017-02-14 13:30:12 brendonofficial

1000 Спасибо, вы спасли мой день. Я был в этом беспорядке весь день – bourax

@bourax Приятно видеть, что вы сейчас вне этого :-) – brendonofficial

Я не знал этого трюка, хороший. Я собирался для ' 'way. – user7393973

Добавить id в свой <path d="..."></path>, а затем код JavaScript с новым путем:

<svg> 
    <path d="..." id="myPath></path> 
</svg> 
<script> 
    document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50"); 
</script>

Вот пример:

<html> 
 
    <body> 
 
    <svg> 
 
     <path d="M 0 0 L 50 0 L 50 50" id="myPath" /> 
 
    </svg> 
 
    <script> 
 
     document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50"); 
 
    </script> 
 
    </body> 
 
</html>

источник

2017-02-14 13:23:36 user7393973

Я не могу изменить код, он генерируется сложным JS-файлом, JS-файл также передал другим сотрудникам. Поэтому я могу управлять только этим фрагментом кода – bourax

@bourax, поэтому вы не можете добавить код JavaScript вообще? – user7393973

Я могу, но я не могу добавить идентификатор внутри этого кода. – bourax

CSS change d свойство <path>

ответ

Смежные вопросы