• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Why can't I change the color of my SVG graphic?

Community Beginner ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

Is there some valid reason as to why Dreamwever is refusing to allow me to change to color on my SVG grapic despte this being the correct colour when created in Illustrator and before I copy and paste it into my HTML document?

 

This its the SVG code:

<svg id="Layer_9" data-name="Layer 9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04"><defs><style>.cls-1{fill:#e0dddd;}</style></defs><path class="cls-1" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)"/></svg>

 The colour code asper the snippet above is 

#E0DDDD

and this is the result I get a blur color.

 

I am getting absolotly bloody sick of this software doing what it wants to. I'm the user, I if tell it change the color, I expect it to change the bloody color! 

 

svg-stackoverflow.png

Views

798

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

Illustrator does not have a clue about HTML/CSS

 

The proper code for the graphic:

<svg id="Layer_9" data-name="Layer 9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04">
	<path class="cls-1" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)" />
</svg>

the CSS for the graphic:

.cls-1 {
	fill: #e0dddd;
}

The CSS can be put in the head section of the page or in another document. The colour can be changed to suit.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

Why not just add the fill to the path:

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04">
<path fill="#e0dddd" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)"/>
</svg>

 

OR

 

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04">
<path class="cls-1" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)"/>
</svg>

 

Then add the css outside of the svg in either a linked stylesheet or embedded in the <head></head> section of the page:

 

<style>

.cls-1 {

fill: #e0dddd;

}

</style>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

LATEST

"I am getting absolotly bloody sick of this software doing what it wants to."

Don't blame Dreamweaver for your malformed code.  If you don't clean it up first, that code will fail in all editors.

 

How to hand code SVG

https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines