include alpha-channel color information when exporting SVG files (70c58ee8) · Commits · github_fork / Clip

core/graphics/color.cc

+10 −14

Original line number	Original line	Diff line number	Diff line
	@@ -28,7 +28,7 @@ Color Color::fromRGB(double red, double green, double blue) {
	return Color({ red, green, blue, 1.0 });		return Color({ red, green, blue, 1.0 });
	}		}

	Color::Color() : components_{0, 0, 0, 0} {}		Color::Color() : components_{0, 0, 0, 1} {}

	Color::Color(		Color::Color(
	const std::initializer_list<double>& components) {		const std::initializer_list<double>& components) {
	@@ -119,20 +119,16 @@ bool Color::parseHexShort(const std::string& str) {
	return true;		return true;
	}		}

	std::string Color::to_hex_str() const {		std::string Color::to_hex_str(size_t n /* = 3 */) const {
	std::stringstream ss;		std::stringstream ss;
			ss << "#" << std::hex;

			for (size_t i = 0; i < n; ++i) {
	ss		ss
	<< "#"
	<< std::hex
	<< std::setfill('0')
	<< std::setw(2)
	<< int(components_[0] * 255)
	<< std::setfill('0')		<< std::setfill('0')
	<< std::setw(2)		<< std::setw(2)
	<< int(components_[1] * 255)		<< int(components_[i] * 255);
	<< std::setfill('0')		}
	<< std::setw(2)
	<< int(components_[2] * 255);

	return ss.str();		return ss.str();
	}		}

core/graphics/color.h

+1 −1

Original line number	Original line	Diff line number	Diff line
	@@ -46,7 +46,7 @@ public:
	bool parseHexAlpha(const std::string& str);		bool parseHexAlpha(const std::string& str);
	bool parseHexShort(const std::string& str);		bool parseHexShort(const std::string& str);

	std::string to_hex_str() const;		std::string to_hex_str(size_t n = 3) const;

	protected:		protected:
	std::array<double, kMaxComponents> components_;		std::array<double, kMaxComponents> components_;

core/graphics/layer_svg.cc

+5 −5

Original line number	Original line	Diff line number	Diff line
	@@ -145,7 +145,7 @@ Status svg_stroke_path(
	<< " "		<< " "
	<< "<path"		<< "<path"
	<< svg_attr("stroke-width", style.line_width)		<< svg_attr("stroke-width", style.line_width)
	<< svg_attr("stroke", style.color.to_hex_str())		<< svg_attr("stroke", style.color.to_hex_str(4))
	<< svg_attr("fill", "none")		<< svg_attr("fill", "none")
	<< svg_attr("d", svg_path_data(path))		<< svg_attr("d", svg_path_data(path))
	<< dash_opts		<< dash_opts
	@@ -164,7 +164,7 @@ Status svg_fill_path(
	svg->buffer		svg->buffer
	<< " "		<< " "
	<< "<path"		<< "<path"
	<< svg_attr("fill", color.to_hex_str())		<< svg_attr("fill", color.to_hex_str(4))
	<< svg_attr("d", svg_path_data(op.path))		<< svg_attr("d", svg_path_data(op.path))
	<< "/>"		<< "/>"
	<< "\n";		<< "\n";
	@@ -192,7 +192,7 @@ Status svg_text_span_native(
	<< "<text"		<< "<text"
	<< svg_attr("x", op.origin.x)		<< svg_attr("x", op.origin.x)
	<< svg_attr("y", op.origin.y)		<< svg_attr("y", op.origin.y)
	<< svg_attr("fill", style.color.to_hex_str())		<< svg_attr("fill", style.color.to_hex_str(4))
	<< svg_attr("font-size", style.font_size)		<< svg_attr("font-size", style.font_size)
	<< svg_attr("font-family", style.font.font_family_css)		<< svg_attr("font-family", style.font.font_family_css)
	<< svg_attr("font-weight", style.font.font_weight_css)		<< svg_attr("font-weight", style.font.font_weight_css)
	@@ -231,7 +231,7 @@ Status svg_text_span_embed(
	svg->buffer		svg->buffer
	<< " "		<< " "
	<< "<path"		<< "<path"
	<< svg_attr("fill", style.color.to_hex_str())		<< svg_attr("fill", style.color.to_hex_str(4))
	<< svg_attr("d", svg_path_data(gp))		<< svg_attr("d", svg_path_data(gp))
	<< svg_attr("transform", gt)		<< svg_attr("transform", gt)
	<< "/>"		<< "/>"
	@@ -284,7 +284,7 @@ ReturnCode layer_bind_svg(
	<< "<rect"		<< "<rect"
	<< svg_attr("width", width)		<< svg_attr("width", width)
	<< svg_attr("height", height)		<< svg_attr("height", height)
	<< svg_attr("fill", background_color.to_hex_str())		<< svg_attr("fill", background_color.to_hex_str(4))
	<< "/>"		<< "/>"
	<< "\n";		<< "\n";

elements/plot/areas_ref.yaml

+1 −1

Original line number	Original line	Diff line number	Diff line
	name: plot/areas		name: plot/areas
	example: charts-basic/areachart		example: charts-editorial/stacked_areas
	desc: \|		desc: \|
	The `plot/areas` element is used to create area charts.		The `plot/areas` element is used to create area charts.

examples/charts-basic/areachart.svg

+47 −47

Original line number	Original line	Diff line number	Diff line
	<svg xmlns="http://www.w3.org/2000/svg" width="900.000000" height="480.000000" viewBox="0 0 900 480">		<svg xmlns="http://www.w3.org/2000/svg" width="900.000000" height="480.000000" viewBox="0 0 900 480">
	<rect width="900.000000" height="480.000000" fill="#ffffff"/>		<rect width="900.000000" height="480.000000" fill="#ffffffff"/>
	<path fill="#eeeeee" d="M82.4313 14.6667 L885.333 14.6667 L885.333 435.6 L82.4313 435.6 Z"/>		<path fill="#eeeeeeff" d="M82.4313 14.6667 L885.333 14.6667 L885.333 435.6 L82.4313 435.6 Z"/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 14.6667 L82.4313 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 14.6667 L82.4313 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M162.721 14.6667 L162.721 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M162.721 14.6667 L162.721 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M243.012 14.6667 L243.012 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M243.012 14.6667 L243.012 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M323.302 14.6667 L323.302 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M323.302 14.6667 L323.302 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M403.592 14.6667 L403.592 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M403.592 14.6667 L403.592 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M483.882 14.6667 L483.882 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M483.882 14.6667 L483.882 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M564.173 14.6667 L564.173 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M564.173 14.6667 L564.173 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M644.463 14.6667 L644.463 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M644.463 14.6667 L644.463 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M724.753 14.6667 L724.753 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M724.753 14.6667 L724.753 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M805.043 14.6667 L805.043 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M805.043 14.6667 L805.043 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M885.333 14.6667 L885.333 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M885.333 14.6667 L885.333 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 435.6 L885.333 435.6 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 435.6 L885.333 435.6 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 393.507 L885.333 393.507 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 393.507 L885.333 393.507 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 351.413 L885.333 351.413 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 351.413 L885.333 351.413 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 309.32 L885.333 309.32 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 309.32 L885.333 309.32 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 267.227 L885.333 267.227 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 267.227 L885.333 267.227 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 225.133 L885.333 225.133 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 225.133 L885.333 225.133 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 183.04 L885.333 183.04 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 183.04 L885.333 183.04 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 140.947 L885.333 140.947 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 140.947 L885.333 140.947 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 98.8533 L885.333 98.8533 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 98.8533 L885.333 98.8533 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 56.76 L885.333 56.76 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 56.76 L885.333 56.76 "/>
	<path stroke-width="1.333333" stroke="#ffffff" fill="none" d="M82.4313 14.6667 L885.333 14.6667 "/>		<path stroke-width="1.333333" stroke="#ffffffff" fill="none" d="M82.4313 14.6667 L885.333 14.6667 "/>
	<path fill="#888888" d="M82.4313 14.6667 L91.9896 104.307 L103.191 159.51 L114.392 155.097 L125.593 199.672 L136.794 227.759 L147.996 246.483 L159.197 257.954 L170.398 287.32 L181.599 235.225 L192.8 251.627 L204.002 301.903 L215.203 237.689 L226.404 245.53 L237.605 295.14 L248.806 288.447 L260.008 321.532 L271.209 344.178 L282.41 378.76 L293.611 391.594 L304.812 409.464 L316.014 270.37 L327.215 166.698 L338.416 138.629 L349.617 163.433 L360.818 220.766 L372.02 300.263 L383.221 293.933 L394.422 341.925 L405.623 358.148 L416.824 380.958 L428.026 360.28 L439.227 385.504 L450.428 337.171 L461.629 297.629 L472.83 379.852 L484.032 390.309 L495.233 403.484 L506.434 435.6 L517.635 369.012 L528.836 339.658 L540.038 342.725 L551.239 358.99 L562.44 315.349 L573.641 383.753 L584.842 337.315 L596.044 318.447 L607.245 320.517 L618.446 345.424 L629.647 294.066 L640.848 285.576 L652.05 252.368 L663.251 294.032 L674.452 335.871 L685.653 369.075 L696.854 305.107 L708.056 335.233 L719.257 328.793 L730.458 386.069 L741.659 402.573 L752.86 385.054 L764.062 398.351 L775.263 384.675 L786.464 361.94 L797.665 369.359 L808.866 354.243 L820.068 331.44 L831.269 344.088 L842.47 364.684 L853.671 289.797 L864.872 279.774 L876.074 239.133 L885.333 243.345 L885.333 435.6 L876.074 435.6 L864.872 435.6 L853.671 435.6 L842.47 435.6 L831.269 435.6 L820.068 435.6 L808.866 435.6 L797.665 435.6 L786.464 435.6 L775.263 435.6 L764.062 435.6 L752.86 435.6 L741.659 435.6 L730.458 435.6 L719.257 435.6 L708.056 435.6 L696.854 435.6 L685.653 435.6 L674.452 435.6 L663.251 435.6 L652.05 435.6 L640.848 435.6 L629.647 435.6 L618.446 435.6 L607.245 435.6 L596.044 435.6 L584.842 435.6 L573.641 435.6 L562.44 435.6 L551.239 435.6 L540.038 435.6 L528.836 435.6 L517.635 435.6 L506.434 435.6 L495.233 435.6 L484.032 435.6 L472.83 435.6 L461.629 435.6 L450.428 435.6 L439.227 435.6 L428.026 435.6 L416.824 435.6 L405.623 435.6 L394.422 435.6 L383.221 435.6 L372.02 435.6 L360.818 435.6 L349.617 435.6 L338.416 435.6 L327.215 435.6 L316.014 435.6 L304.812 435.6 L293.611 435.6 L282.41 435.6 L271.209 435.6 L260.008 435.6 L248.806 435.6 L237.605 435.6 L226.404 435.6 L215.203 435.6 L204.002 435.6 L192.8 435.6 L181.599 435.6 L170.398 435.6 L159.197 435.6 L147.996 435.6 L136.794 435.6 L125.593 435.6 L114.392 435.6 L103.191 435.6 L91.9896 435.6 L82.4313 435.6 Z"/>		<path fill="#888888ff" d="M82.4313 14.6667 L91.9896 104.307 L103.191 159.51 L114.392 155.097 L125.593 199.672 L136.794 227.759 L147.996 246.483 L159.197 257.954 L170.398 287.32 L181.599 235.225 L192.8 251.627 L204.002 301.903 L215.203 237.689 L226.404 245.53 L237.605 295.14 L248.806 288.447 L260.008 321.532 L271.209 344.178 L282.41 378.76 L293.611 391.594 L304.812 409.464 L316.014 270.37 L327.215 166.698 L338.416 138.629 L349.617 163.433 L360.818 220.766 L372.02 300.263 L383.221 293.933 L394.422 341.925 L405.623 358.148 L416.824 380.958 L428.026 360.28 L439.227 385.504 L450.428 337.171 L461.629 297.629 L472.83 379.852 L484.032 390.309 L495.233 403.484 L506.434 435.6 L517.635 369.012 L528.836 339.658 L540.038 342.725 L551.239 358.99 L562.44 315.349 L573.641 383.753 L584.842 337.315 L596.044 318.447 L607.245 320.517 L618.446 345.424 L629.647 294.066 L640.848 285.576 L652.05 252.368 L663.251 294.032 L674.452 335.871 L685.653 369.075 L696.854 305.107 L708.056 335.233 L719.257 328.793 L730.458 386.069 L741.659 402.573 L752.86 385.054 L764.062 398.351 L775.263 384.675 L786.464 361.94 L797.665 369.359 L808.866 354.243 L820.068 331.44 L831.269 344.088 L842.47 364.684 L853.671 289.797 L864.872 279.774 L876.074 239.133 L885.333 243.345 L885.333 435.6 L876.074 435.6 L864.872 435.6 L853.671 435.6 L842.47 435.6 L831.269 435.6 L820.068 435.6 L808.866 435.6 L797.665 435.6 L786.464 435.6 L775.263 435.6 L764.062 435.6 L752.86 435.6 L741.659 435.6 L730.458 435.6 L719.257 435.6 L708.056 435.6 L696.854 435.6 L685.653 435.6 L674.452 435.6 L663.251 435.6 L652.05 435.6 L640.848 435.6 L629.647 435.6 L618.446 435.6 L607.245 435.6 L596.044 435.6 L584.842 435.6 L573.641 435.6 L562.44 435.6 L551.239 435.6 L540.038 435.6 L528.836 435.6 L517.635 435.6 L506.434 435.6 L495.233 435.6 L484.032 435.6 L472.83 435.6 L461.629 435.6 L450.428 435.6 L439.227 435.6 L428.026 435.6 L416.824 435.6 L405.623 435.6 L394.422 435.6 L383.221 435.6 L372.02 435.6 L360.818 435.6 L349.617 435.6 L338.416 435.6 L327.215 435.6 L316.014 435.6 L304.812 435.6 L293.611 435.6 L282.41 435.6 L271.209 435.6 L260.008 435.6 L248.806 435.6 L237.605 435.6 L226.404 435.6 L215.203 435.6 L204.002 435.6 L192.8 435.6 L181.599 435.6 L170.398 435.6 L159.197 435.6 L147.996 435.6 L136.794 435.6 L125.593 435.6 L114.392 435.6 L103.191 435.6 L91.9896 435.6 L82.4313 435.6 Z"/>
	<text x="53.884375" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">05:15:44</text>		<text x="53.884375" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">05:15:44</text>
	<text x="134.174585" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">05:51:34</text>		<text x="134.174585" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">05:51:34</text>
	<text x="214.464794" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">06:27:24</text>		<text x="214.464794" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">06:27:24</text>
	<text x="294.755010" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">07:03:15</text>		<text x="294.755010" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">07:03:15</text>
	<text x="375.045213" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">07:39:05</text>		<text x="375.045213" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">07:39:05</text>
	<text x="455.335417" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">08:14:56</text>		<text x="455.335417" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">08:14:56</text>
	<text x="535.625644" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">08:50:46</text>		<text x="535.625644" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">08:50:46</text>
	<text x="615.915824" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">09:26:36</text>		<text x="615.915824" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">09:26:36</text>
	<text x="696.206051" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">10:02:27</text>		<text x="696.206051" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">10:02:27</text>
	<text x="776.496279" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">10:38:17</text>		<text x="776.496279" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">10:38:17</text>
	<text x="857.333333" y="461.333333" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">11:14:08</text>		<text x="857.333333" y="461.333333" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">11:14:08</text>
	<text x="14.666667" y="439.100000" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">7.3 × 10⁶</text>		<text x="14.666667" y="439.100000" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">7.3 × 10⁶</text>
	<text x="14.666667" y="397.006666" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">7.4 × 10⁶</text>		<text x="14.666667" y="397.006666" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">7.4 × 10⁶</text>
	<text x="14.666667" y="354.913332" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">7.6 × 10⁶</text>		<text x="14.666667" y="354.913332" fill="#000000ff" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">7.6 × 10⁶</text>

Admin message