Изменение SVG атрибуты изображения с помощью кнопки мыши с помощью JavaScript/JQuery

я создал один SVG дверь изображение с помощью Adobe illustrator.The изображение имеет 3 компонентаИзменение SVG атрибуты изображения с помощью кнопки мыши с помощью JavaScript/JQuery

двери кузова
Стеклянная часть в центре двери
Дверная ручка. >>

Я хочу изменить это 3 атрибутов, нажав кнопки, как меняется ручка, цвет, материал корпуса и т.д. У меня открыт этот файл SVG в Dreamweaver и это выглядит странно с длинными ссылками на изображения и коды. Я не знаю с чего начать.

Благодаря

<?xml version="1.0" encoding="utf-8"?> 
<!-- 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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve"> 
    <rect x="146.889" y="134.444" fill="#6B4520" stroke="#000000" stroke- miterlimit="10" width="328.889" height="487.777"/> 
<path fill="#BDE5F1" stroke="#000000" stroke-miterlimit="10" d="M372.998,351.667c0,38.2-25.577,67-66.998,67 
c-41.421,0-71.002-28.8-71.002-67c0-38.2,27.579-64.667,69- 64.667C345.419,287,372.998,313.467,372.998,351.667z"/> 
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="155.665" y1="352.25" x2="174.25" y2="352.25"> 
    <stop offset="0" style="stop-color:#FFFFFF"/> 
    <stop offset="0" style="stop-color:#603913"/> 
    <stop offset="0" style="stop-color:#000000"/> 
    <stop offset="0.0161" style="stop-color:#000000"/> 
    <stop offset="0.3333" style="stop-color:#D9CDC0"/> 
    <stop offset="0.5161" style="stop-color:#000000"/> 
    <stop offset="0.8763" style="stop-color:#FFFFFF"/> 
    </linearGradient> 
    <polygon fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10" points="171.333,430.556 164.958,434 159.111,430.556 
155.665,344.667 159.111,272.778 164.958,270.5 171.333,272.778 174.25,344.25 "/> 
    </svg>

источник

2016-02-15 Tony

Я не знаю о DreamWeaver, связанной с SVG, но вы можете добавить к вашему вопросу 'SVG' код [из Illustrator] (https://helpx.adobe.com/illustrator/how-to/export-svg .html), и мы могли бы помочь вам справиться с этим. –

Спасибо Мош .. Я использую иллюстратор cs6. в опции экспорта нет формата .svg, но я могу сохранить формат файла svg. Формат svg мы можем редактировать стили, заполнять цвет и т. д., но в моем случае код выглядит очень большим. – Tony

Это имеет смысл, потому что ваше изображение содержит много элементов. Вы можете создать [bin] (http://jsbin.com) со всем своим кодом, и мы вам поможем. Просто держите его в уме, чтобы сгруппировать элементы, которые вы хотите заменить, как дескриптор и т. Д. –

Это достаточно простой, наиболее важной частью является вы включаете svg внутри html не просто как изображения src атрибута. Ниже приведен не характерный для Dreamweaver.

Например:

<body> 
    <!-- this won't work well --> 
    <img src="/images/door.svg> 
    ... 
    <!-- this will work very well --> 
    <svg> 
     <path></path> 
     <path></path> 
    </svg> 
    ... 
</body>

Теперь так же, как и любой другой элемент вы можете дать svg и path элементы id «s и classes

<svg id="door"> 
    <path id="handle"></path> 
    <path id="window"></path> 
</svg>

Здесь вы можете использовать обработчики событий, специфичные например, с помощью jQuery) для выполнения других функций для настройки этих элементов svg.

$('#handle').on('click', function(){ 
    $(this).css('fill', 'blue') // change path fill to blue 
})

path «s и другие svg элементы могут более или менее быть стилизовано с CSS, который делает это намного проще.

Это не копия и вставка ответа, но я надеюсь, что это поможет вам!

источник

2016-02-15 10:43:28 brod

Да, Брод. Это то, что им нужно. Теперь у него больше ясности, у меня есть еще больше qstion над этим. В svg-формате мы можем иметь отдельный контроль по каждому элементу? позвольте мне очистить Tony

Мне нравится это решение +1. Я бы не пользовался jquery с svg, в моем опыте есть много случаев, когда они не будут работать вместе. – Persijn

@Tony, 'svg' файлы обычно выглядят как код, который я написал в ответе (хотя и с большим количеством информации) - попробуйте открыть файл' svg' в редакторе текста/кода, Dreamweaver может делать что-то странное, что предотвращает просмотр кода. – brod

Изменение SVG атрибуты изображения с помощью кнопки мыши с помощью JavaScript/JQuery

ответ

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