Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

SVG <use> with xlink:href is not working in Edge

Tags:

html

svg

microsoft-edge

I'm experiencing weird behavior in Edge that it doesn't call the <paths> defined in the same document. Though this only happens in my app but not on the style guide. Also, I wasn't thinking that this is a Edge problem since based from microsoft docs they are supporting xlink:href attribute.

Style Guide (viewed in Edge) enter image description here From here you can see that the svg icon is rendering just fine, though from the console(DOM Explorer) the <use> element is being used and referenced to each path by ID not external svg resources. Fiddle: https://jsfiddle.net/kfL7tbcf/

Web App (missing svg) enter image description here In the web app, when I tried to use the SVG, it is not getting the referenced by element. Fiddle: https://jsfiddle.net/kfL7tbcf/

Web App (svg without <use> element) enter image description here SVG displays okay without <use> element. Fiddle: https://jsfiddle.net/9uuLr9gd/

Any thoughts and help would be greatly appreciated. Thank you!

like image 363
Vincent Panugaling Avatar asked May 11 '17 18:05

Vincent Panugaling

People also ask

Can I use SVG XLink href?

Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href . If you need to support earlier browser versions, the deprecated xlink:href attribute can be used as a fallback in addition to the href attribute, e.g. <use href="some-id" xlink:href="some-id" x="5" y="5" /> .

What is XLink CSS?

XLink is used to create hyperlinks in XML documents. XLink is used to create hyperlinks within XML documents. Any element in an XML document can behave as a link. With XLink, the links can be defined outside the linked files. XLink is a W3C Recommendation.

1 Answers

Use inline SVG to avoid the problem! Run the snippet in the Edge and you will be see the question mark. For reliability, you could add xmlns:xlink="http://www.w3.org/1999/xlink" namespace definition to the svg element.

<svg id="action-help" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" >
<defs>
  <path id="qMark" d="M10 19h3v3h-3v-3m2-17c5.35.22 7.68 5.62 4.5 9.67-.83 1-2.17 1.66-2.83 2.5C13 15 13 16 13 17h-3c0-1.67 0-3.08.67-4.08.66-1 2-1.59 2.83-2.25C15.92 8.43 15.32 5.26 12 5a3 3 0 0 0-3 3H6a6 6 0 0 1 6-6z"></path>
</defs>
<use xlink:href="#qMark"/>
</svg>

For your case:

<svg id="dashboard-calculated-lp" viewBox="0 0 1093.82 512" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" focusable="false">
  <defs>
    <path id="dashboard-calculated-lp_b" d="M188 0H0v88h188V0z"></path>
    <path id="dashboard-calculated-lp_c" d="M32 64c17.673 0 32-14.327 32-32C64 14.327 49.673 0 32 0 14.327 0 0 14.327 0 32c0 17.673 14.327 32 32 32z"></path>
    <path id="dashboard-calculated-lp_d" fill-rule="evenodd" d="M8.012 11.223C4.925 11.223 2.4 8.698 2.4 5.61 2.4 2.525 4.925.07 8.01 0c3.088 0 5.613 2.525 5.613 5.611 0 3.087-2.525 5.612-5.612 5.612zm9.336 9.745a2.297 2.297 0 0 0-2.295-2.295H2.296A2.297 2.297 0 0 0 0 20.968v16.67a2.297 2.297 0 0 0 2.296 2.295H5.02V54.87h7.11V39.933h2.921a2.297 2.297 0 0 0 2.296-2.295v-16.67z"></path>
    <path id="dashboard-calculated-lp_f" d="M8.012 0v-2h-.045l.045 2zm-2.99 39.933h2v-2h-2v2zm0 14.936h-2v2h2v-2zm7.108 0v2h2v-2h-2zm0-14.936v-2h-2v2h2zM.4 5.611c0 4.192 3.42 7.612 7.612 7.612v-4A3.627 3.627 0 0 1 4.4 5.61h-4zm7.567-7.61C3.851-1.909.401 1.38.401 5.61h4C4.4 3.67 5.998 2.045 8.056 2l-.089-4zm7.657 7.61C15.624 1.42 12.204-2 8.012-2v4a3.627 3.627 0 0 1 3.612 3.611h4zm-7.612 7.612c4.192 0 7.612-3.42 7.612-7.612h-4a3.627 3.627 0 0 1-3.612 3.612v4zm7.04 7.45c.163 0 .296.133.296.295h4a4.297 4.297 0 0 0-4.295-4.295v4zm-12.756 0h12.757v-4H2.296v4zM2 20.968c0-.162.133-.295.296-.295v-4A4.297 4.297 0 0 0-2 20.968h4zm0 16.67v-16.67h-4v16.67h4zm.296.295A.297.297 0 0 1 2 37.638h-4a4.297 4.297 0 0 0 4.296 4.295v-4zm2.725 0H2.296v4H5.02v-4zm2 16.936V39.933h-4V54.87h4zm5.11-2H5.02v4h7.11v-4zm-2-12.936V54.87h4V39.933h-4zm4.921-2H12.13v4h2.922v-4zm.296-.295a.297.297 0 0 1-.296.295v4a4.297 4.297 0 0 0 4.296-4.295h-4zm0-16.67v16.67h4v-16.67h-4z"></path>
    <path id="dashboard-calculated-lp_g" d="M0 0h54.26v48.696H0V0z"></path>
    <path id="dashboard-calculated-lp_i" fill-rule="evenodd" d="M5.39 9.352A4.667 4.667 0 0 1 .714 4.677C.714 2.089 2.872-.07 5.39.002a4.667 4.667 0 0 1 4.676 4.675A4.667 4.667 0 0 1 5.39 9.352zm-2.781 6.36h10.043v17.673H8.413v12.969H2.61V33.442H0s1.235-.665 1.707-1.254c.398-.498.902-2.007.902-2.007V15.713z"></path>
    <path id="dashboard-calculated-lp_j" fill-rule="evenodd" d="M12.152 15.586H3.74v1.923h8.48c.84 0 1.541.712 1.541 1.567v14.538c0 .853-.7 1.565-1.54 1.565H9.56v12.828h1.891V37.106h.7c1.893 0 3.437-1.566 3.437-3.492V19.08c0-1.928-1.54-3.494-3.436-3.494zM1.249 36.876h.767v11.131h1.725V34.914H1.247v1.962h.002zM0 6.546A6.53 6.53 0 0 1 6.547 0a6.53 6.53 0 0 1 6.547 6.546 6.529 6.529 0 0 1-6.547 6.547A6.524 6.524 0 0 1 0 6.546zm1.87.001a4.666 4.666 0 0 0 4.677 4.675 4.667 4.667 0 0 0 4.676-4.675 4.668 4.668 0 0 0-4.676-4.675C4.029 1.8 1.87 3.959 1.87 6.547z"></path>
    <path id="dashboard-calculated-lp_k" fill-rule="evenodd" d="M7.215 9.352a4.668 4.668 0 0 1-4.677-4.676A4.668 4.668 0 0 1 7.215 0a4.668 4.668 0 0 1 4.676 4.676 4.667 4.667 0 0 1-4.676 4.676zm2.828 6.36H0v17.673h4.174v12.968h5.804V33.442h2.61s-1.236-.665-1.708-1.254c-.312-.39-.688-1.4-.837-1.82V15.712z"></path>
    <path id="dashboard-calculated-lp_l" fill-rule="evenodd" d="M11.85 48.007h1.724V36.876h.767v-1.962h-2.494v13.093h.003zM1.822 33.614V19.078c0-.853.701-1.566 1.54-1.566h8.485v-1.926h-8.41C1.544 15.586 0 17.152 0 19.078v14.536c0 1.92 1.54 3.49 3.437 3.49h.7v10.903H6.03V35.183H3.437c-.914-.004-1.615-.717-1.615-1.57zm.672-27.068A6.53 6.53 0 0 1 9.04 0a6.53 6.53 0 0 1 6.546 6.546 6.529 6.529 0 0 1-6.546 6.547 6.525 6.525 0 0 1-6.547-6.547zm1.87 0a4.667 4.667 0 0 0 4.677 4.676 4.667 4.667 0 0 0 4.676-4.676A4.668 4.668 0 0 0 9.04 1.87a4.668 4.668 0 0 0-4.676 4.676z"></path>
    <path id="dashboard-calculated-lp_m" fill-rule="evenodd" d="M3.716 0C1.722 0 0 1.549 0 3.542v30.06c0 1.992 1.722 3.56 3.716 3.56H20.4c-.06 1.427-.222 2.694-.58 3.697-.436 1.219-1.058 2.006-2.149 2.497h-2.186a1.24 1.24 0 0 0 0 2.477H39.02a1.24 1.24 0 0 0 0-2.477h-2.187c-1.09-.49-1.713-1.278-2.148-2.497-.359-1.003-.52-2.27-.58-3.697h16.683c1.994 0 3.716-1.568 3.716-3.56V3.541C54.504 1.55 52.782 0 50.788 0H3.716z"></path>
    <path id="dashboard-calculated-lp_o" d="M20.4 37.162l1.998.084.089-2.084H20.4v2zm-.58 3.697l1.883.673-1.883-.673zm-2.149 2.497v2h.429l.391-.176-.82-1.824zm19.162 0l-.82 1.824.392.176h.428v-2zm-2.148-2.497l-1.884.673 1.883-.673zm-.58-3.697v-2h-2.087l.088 2.084 1.998-.084zM3.715-2C.744-2-2 .321-2 3.542h4C2 2.776 2.7 2 3.716 2v-4zM-2 3.542v30.06h4V3.541h-4zm0 30.06c0 3.206 2.73 5.56 5.716 5.56v-4C2.714 35.162 2 34.38 2 33.602h-4zm5.716 5.56H20.4v-4H3.716v4zm14.686-2.085c-.055 1.343-.169 2.314-.466 3.11l3.767 1.345c.42-1.21.63-2.775.695-4.285l-3.996-.17zm-.466 3.11c-.298.834-.603 1.128-1.085 1.345l1.64 3.648c1.7-.764 2.64-2.045 3.212-3.648l-3.767-1.346zm-.265 1.169h-2.186v4h2.186v-4zm-2.186 0a3.24 3.24 0 0 0-3.24 3.239h4a.76.76 0 0 1-.76.76v-4zm-3.24 3.239a3.24 3.24 0 0 0 3.24 3.238v-4c.42 0 .76.34.76.762h-4zm3.24 3.238H39.02v-4H15.484v4zm23.535 0a3.24 3.24 0 0 0 3.239-3.238h-4a.76.76 0 0 1 .76-.762v4zm3.239-3.238a3.24 3.24 0 0 0-3.24-3.24v4a.76.76 0 0 1-.76-.76h4zm-3.24-3.24h-2.186v4h2.187v-4zm-1.365.177c-.483-.217-.788-.51-1.086-1.346L32.8 41.532c.573 1.603 1.513 2.884 3.212 3.648l1.64-3.648zm-1.086-1.345c-.297-.796-.41-1.767-.465-3.11l-3.997.17c.066 1.51.275 3.074.695 4.285l3.767-1.345zm-2.464-1.025h16.684v-4H34.104v4zm16.684 0c2.986 0 5.716-2.354 5.716-5.56h-4c0 .779-.714 1.56-1.716 1.56v4zm5.716-5.56V3.541h-4v30.06h4zm0-30.06C56.504.322 53.76-2 50.788-2v4c1.016 0 1.716.776 1.716 1.542h4zM50.788-2H3.716v4h47.072v-4z"></path>
    <path id="dashboard-calculated-lp_p" d="M54.212 0H0v2.259h54.212V0z"></path>
    <path id="dashboard-calculated-lp_q" fill-rule="evenodd" d="M1.391 9.74h.005V2.236c0-.453.43-.85 1.096-.85h5.057a.694.694 0 0 0 .8-.688.695.695 0 0 0-.679-.696V0H1.097C.433 0 .001.398.001.85v8.845L0 9.742c0 .387.312.696.696.696a.694.694 0 0 0 .695-.696v-.003z"></path>
    <path id="dashboard-calculated-lp_r" d="M50.087 0H0v2.087h50.087V0z"></path>
    <path id="dashboard-calculated-lp_s" fill-rule="evenodd" d="M0 2.092C0 .936.93 0 2.088 0h32.694c1.153 0 2.088.934 2.088 2.092v23.642c0 1.156-.93 2.092-2.088 2.092H2.088A2.088 2.088 0 0 1 0 25.734V2.092z"></path>
    <path id="dashboard-calculated-lp_u" d="M2 2.092C2 2.034 2.041 2 2.088 2v-4A4.087 4.087 0 0 0-2 2.092h4zM2.088 2h32.694v-4H2.088v4zm32.694 0c.046 0 .088.036.088.092h4A4.088 4.088 0 0 0 34.782-2v4zm.088.092v23.642h4V2.092h-4zm0 23.642c0 .058-.042.092-.088.092v4a4.087 4.087 0 0 0 4.088-4.092h-4zm-.088.092H2.088v4h32.694v-4zm-32.694 0A.088.088 0 0 1 2 25.734h-4a4.088 4.088 0 0 0 4.088 4.092v-4zM2 25.734V2.092h-4v23.642h4z"></path>
    <path id="dashboard-calculated-lp_v" d="M32.696 0H0v2.087h32.696V0z"></path>
    <path id="dashboard-calculated-lp_w" d="M16.696 0H0v1.391h16.696V0z"></path>
    <path id="dashboard-calculated-lp_x" d="M13.913 0H0v1.391h13.913V0z"></path>
    <path id="dashboard-calculated-lp_y" d="M15.304 0H0v1.391h15.304V0z"></path>
    <path id="dashboard-calculated-lp_z" d="M1.391 0H0v20.174h1.391V0z"></path>
    <path id="dashboard-calculated-lp_A" d="M44 86.128c24.3 0 44-19.28 44-43.064S68.3 0 44 0 0 19.28 0 43.064c0 23.783 19.7 43.064 44 43.064z"></path>
    <path id="dashboard-calculated-lp_C" d="M85 43.064c0 22.066-18.295 40.064-41 40.064v6c25.896 0 47-20.563 47-46.064h-6zM44 83.128c-22.705 0-41-17.998-41-40.064h-6c0 25.5 21.104 46.064 47 46.064v-6zM3 43.064C3 20.998 21.295 3 44 3v-6C18.104-3-3 17.563-3 43.064h6zM44 3c22.705 0 41 17.998 41 40.064h6C91 17.563 69.896-3 44-3v6z"></path>
    <path id="dashboard-calculated-lp_D" fill-rule="evenodd" d="M5.737 0h45.915v63.66H6.437C2.882 63.66 0 59.507 0 54.369V5.579C0 2.5 2.562 0 5.737 0z"></path>
    <path id="dashboard-calculated-lp_F" d="M51.652 0h2.5v-2.5h-2.5V0zm0 63.66v2.5h2.5v-2.5h-2.5zM5.737 2.5h45.915v-5H5.737v5zM49.152 0v63.66h5V0h-5zm2.5 61.16H6.437v5h45.215v-5zm-45.215 0c-.728 0-1.65-.422-2.497-1.643-.84-1.212-1.44-3.023-1.44-5.148h-5c0 3.013.84 5.847 2.33 7.996 1.484 2.14 3.78 3.795 6.607 3.795v-5zM2.5 54.369V5.579h-5v48.79h5zm0-48.79C2.5 3.943 3.878 2.5 5.737 2.5v-5C1.245-2.5-2.5 1.054-2.5 5.58h5z"></path>
    <path id="dashboard-calculated-lp_G" fill-rule="evenodd" d="M3.953 0l.002 1.399a59.864 59.864 0 0 1-.034 1.642 51.256 51.256 0 0 1-.241 3.552c-.189 1.781-.47 3.166-.813 3.914-.276.602-.682 1.444-1.205 1.72a3.418 3.418 0 0 1-1.602.39L0 14.979l45.359-.03c5.19 0 9.088-3.144 9.088-7.922l.06-5.615L54.521 0H3.953z"></path>
    <path id="dashboard-calculated-lp_I" d="M3.953 0v-2.5H1.449L1.453.003 3.953 0zm.002 1.399h2.5v-.003l-2.5.003zm-.005.458l-2.5-.044v.01l2.5.034zM3.92 3.04l2.499.089v-.005L3.92 3.04zm-.24 3.552L1.194 6.33v.001l2.486.263zm-.813 3.914L5.14 11.55l.001-.002-2.273-1.041zm-1.205 1.72L.498 10.013l1.164 2.212zm-1.602.39l.068-2.5-2.503-.067-.064 2.503 2.5.064zM0 14.979l-2.5-.064-.065 2.565 2.567-.001-.002-2.5zm45.359-.03v-2.5h-.002l.002 2.5zm9.088-7.922L51.947 7v.027h2.5zm.06-5.615l-2.5-.027 2.5.027zM54.521 0l2.5.027.027-2.527h-2.527V0zM1.452.003l.003 1.4 5-.007-.002-1.4-5 .007zM1.456 1.4c0 .079-.001.21-.005.414l5 .088.005-.502h-5zm-.005.424c-.004.342-.014.715-.028 1.135l4.997.167c.014-.438.026-.86.03-1.235L1.45 1.823zm-.028 1.13a47.669 47.669 0 0 1-.228 3.376l4.972.529c.125-1.178.208-2.478.253-3.728l-4.997-.177zM1.194 6.33c-.187 1.769-.442 2.792-.6 3.135L5.14 11.55c.528-1.152.836-2.9 1.026-4.693L1.194 6.33zM.596 9.463c-.138.3-.25.528-.355.696-.05.079-.07.098-.056.083.009-.01.109-.12.313-.228l2.329 4.425c.868-.457 1.39-1.212 1.647-1.62.277-.449.521-.955.665-1.269L.596 9.463zm-.099.552a.964.964 0 0 1-.235.083c-.093.02-.146.02-.134.02l-.135 4.998a5.91 5.91 0 0 0 2.835-.678l-2.33-4.424zm-2.936 2.538l-.06 2.362 4.998.128.06-2.362-4.998-.128zm2.44 4.926l45.36-.03-.004-5-45.359.03.004 5zm45.358-.03c3.087 0 5.964-.937 8.112-2.766 2.18-1.858 3.476-4.534 3.476-7.656h-5c0 1.656-.653 2.941-1.72 3.85-1.098.936-2.766 1.572-4.868 1.572v5zM56.947 7.053l.06-5.615-5-.052L51.947 7l5 .053zm.06-5.614l.015-1.412-5-.054-.015 1.412 5 .054zM54.521-2.5H53.07v5h1.45v-5zm-1.451 0H5.39v5h47.68v-5zm-47.68 0H3.952v5H5.39v-5z"></path>
    <path id="dashboard-calculated-lp_J" d="M20.924 0H0v1.872h20.924V0z"></path>
    <path id="dashboard-calculated-lp_K" d="M26.783 0H0v1.872h26.783V0z"></path>
    <path id="dashboard-calculated-lp_L" d="M21.76 0H0v1.872h21.76V0z"></path>
    <path id="dashboard-calculated-lp_M" fill-rule="evenodd" d="M18.84 31.83l-6.543 4.488-2.065-7.554-7.96-.679L5.652 21 0 15.472l7.243-3.302-.7-7.79 7.717 2.027L18.84 0l4.58 6.407 7.717-2.027-.7 7.79 7.242 3.302L32.027 21l3.38 7.086-7.96.679-2.065 7.554-6.542-4.488z"></path>
    <path id="dashboard-calculated-lp_N" d="M18.84 31.83l.848-1.237-.848-.582-.849.582.849 1.237zm-6.543 4.488l-1.447.395.556 2.035 1.74-1.193-.849-1.237zm-2.065-7.554l1.447-.396-.276-1.01-1.044-.089-.127 1.495zm-7.96-.679L.918 27.44l-.933 1.957 2.16.184.127-1.495zM5.652 21l1.354.646.462-.968-.767-.75-1.049 1.072zM0 15.472l-.622-1.365-1.991.908 1.564 1.53L0 15.471zm7.243-3.302l.622 1.365.967-.44-.095-1.06-1.494.135zm-.7-7.79l.38-1.45-2.066-.543.192 2.128 1.494-.135zm7.717 2.027l-.381 1.45 1 .264.601-.842-1.22-.872zM18.84 0l1.22-.872-1.22-1.707-1.22 1.707L18.84 0zm4.58 6.407l-1.22.872.6.842 1-.263-.38-1.45zm7.717-2.027l1.494.135.19-2.128-2.065.543.38 1.45zm-.7 7.79l-1.495-.134-.095 1.058.967.441.622-1.365zm7.242 3.302l1.049 1.072 1.564-1.53-1.99-.907-.623 1.365zM32.027 21l-1.049-1.072-.767.75.462.968L32.027 21zm3.38 7.086l.128 1.495 2.16-.184-.934-1.957-1.353.646zm-7.96.679l-.127-1.495-1.043.09-.277 1.01 1.447.395zm-2.065 7.554l-.848 1.237 1.739 1.193.556-2.035-1.447-.395zm-7.39-5.725l-6.544 4.488 1.697 2.474 6.543-4.488-1.697-2.474zm-4.248 5.33l-2.065-7.555-2.894.791 2.065 7.554 2.894-.79zm-3.385-8.654l-7.96-.678-.255 2.989 7.96.678.255-2.989zm-6.733 1.462l3.38-7.086-2.708-1.292-3.38 7.086 2.708 1.292zM6.7 19.927L1.049 14.4l-2.098 2.144 5.652 5.528 2.098-2.145zm-6.079-3.09l7.243-3.302-1.244-2.73-7.243 3.302 1.244 2.73zm8.115-4.801l-.7-7.79-2.988.269.7 7.79 2.988-.27zM6.162 5.83l7.717 2.027.762-2.902L6.924 2.93 6.162 5.83zM15.48 7.28L20.06.872 17.62-.872l-4.58 6.407 2.44 1.744zM17.62.872L22.2 7.28l2.44-1.744-4.58-6.407L17.62.872zm6.18 6.986l7.718-2.027-.762-2.901-7.718 2.026.762 2.902zm5.843-3.612l-.7 7.79 2.987.269.7-7.79-2.987-.269zm.171 9.29l7.243 3.301 1.244-2.73-7.242-3.302-1.245 2.73zm6.817.864l-5.652 5.527 2.097 2.145 5.652-5.527-2.097-2.145zm-5.958 7.245l3.38 7.086 2.708-1.292-3.38-7.086-2.708 1.292zm4.607 4.945l-7.96.68.255 2.988 7.96-.678-.255-2.99zM26 28.368l-2.065 7.554 2.894.791 2.065-7.554-2.893-.79zm.23 6.713l-6.542-4.488-1.697 2.474 6.543 4.488 1.697-2.474z"></path>
  </defs>
  <g transform="translate(-69.818 2909.09) scale(5.81818)">
    <mask id="dashboard-calculated-lp_a">
      <path d="M12-500h188v88H12v-88z" fill="#FFF"></path>
    </mask>
    <g style="mix-blend-mode:normal" mask="url(#dashboard-calculated-lp_a)">
      <use xlink:href="#dashboard-calculated-lp_b" transform="translate(12 -500)" fill="#FFF" style="mix-blend-mode:normal" opacity=".01"></use>
      <g style="mix-blend-mode:normal">
        <use xlink:href="#dashboard-calculated-lp_c" transform="translate(12 -488)" fill="#E6EAEB" style="mix-blend-mode:normal"></use>
        <g style="mix-blend-mode:normal">
          <g style="mix-blend-mode:normal">
            <use xlink:href="#dashboard-calculated-lp_d" transform="translate(35.479 -477.252)" fill="#FFF" style="mix-blend-mode:normal"></use>
            <mask id="dashboard-calculated-lp_e">
              <path fill="#fff" transform="translate(35.479 -477.252)" d="M-2-2h22v59H-2z"></path>
              <use xlink:href="#dashboard-calculated-lp_d" transform="translate(35.479 -477.252)"></use>
            </mask>
            <g mask="url(#dashboard-calculated-lp_e)">
              <use xlink:href="#dashboard-calculated-lp_f" transform="translate(35.479 -477.252)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            </g>
          </g>
          <mask id="dashboard-calculated-lp_h">
            <use xlink:href="#dashboard-calculated-lp_g" transform="translate(16.87 -473.391)" fill="#C4C4C4" style="mix-blend-mode:normal"></use>
          </mask>
          <g style="mix-blend-mode:normal" mask="url(#dashboard-calculated-lp_h)">
            <use xlink:href="#dashboard-calculated-lp_i" transform="translate(54.696 -467.828)" fill="#F8F8F8" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_j" transform="translate(53.54 -469.655)" fill="#A4AAA4" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_k" transform="translate(20.305 -467.827)" fill="#F8F8F8" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_l" transform="translate(18.479 -469.655)" fill="#A4AAA4" style="mix-blend-mode:normal"></use>
          </g>
        </g>
      </g>
      <g style="mix-blend-mode:normal">
        <use xlink:href="#dashboard-calculated-lp_c" transform="translate(134.391 -488)" fill="#E6EAEB" style="mix-blend-mode:normal"></use>
        <g style="mix-blend-mode:normal">
          <g style="mix-blend-mode:normal">
            <g style="mix-blend-mode:normal">
              <use xlink:href="#dashboard-calculated-lp_m" transform="translate(133 -479.036)" fill="#FFF" style="mix-blend-mode:normal"></use>
              <mask id="dashboard-calculated-lp_n">
                <use xlink:href="#dashboard-calculated-lp_m" fill="#fff" transform="translate(133 -479.036)"></use>
              </mask>
              <g mask="url(#dashboard-calculated-lp_n)">
                <use xlink:href="#dashboard-calculated-lp_o" transform="translate(133 -479.036)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
              </g>
            </g>
            <use xlink:href="#dashboard-calculated-lp_p" transform="matrix(.69444 0 0 .83333 144.294 -443.765)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_q" transform="translate(143.565 -473.474)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_r" transform="matrix(1.02083 0 0 1 134.67 -451.21)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
          </g>
          <g style="mix-blend-mode:normal">
            <g style="mix-blend-mode:normal">
              <use xlink:href="#dashboard-calculated-lp_s" transform="translate(162.913 -456.775)" fill="#FFF" style="mix-blend-mode:normal"></use>
              <mask id="dashboard-calculated-lp_t">
                <use xlink:href="#dashboard-calculated-lp_s" fill="#fff" transform="translate(162.913 -456.775)"></use>
              </mask>
              <g mask="url(#dashboard-calculated-lp_t)">
                <use xlink:href="#dashboard-calculated-lp_u" transform="translate(162.913 -456.775)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
              </g>
            </g>
            <use xlink:href="#dashboard-calculated-lp_v" transform="matrix(1.02128 0 0 1 164.637 -451.21)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_w" transform="translate(177.522 -445.645)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_x" transform="translate(177.522 -441.471)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_y" transform="translate(177.522 -437.297)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_z" transform="matrix(1 0 0 1.01724 172.652 -451.21)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
          </g>
        </g>
      </g>
      <g style="mix-blend-mode:normal">
        <g style="mix-blend-mode:normal">
          <use xlink:href="#dashboard-calculated-lp_A" transform="translate(62 -500)" fill="#F3EFE7" style="mix-blend-mode:normal"></use>
          <mask id="dashboard-calculated-lp_B">
            <use xlink:href="#dashboard-calculated-lp_A" fill="#fff" transform="translate(62 -500)"></use>
          </mask>
          <g mask="url(#dashboard-calculated-lp_B)">
            <use xlink:href="#dashboard-calculated-lp_C" transform="translate(62 -500)" fill="#AE9357" style="mix-blend-mode:normal"></use>
          </g>
        </g>
        <g style="mix-blend-mode:normal">
          <g style="mix-blend-mode:normal">
            <use xlink:href="#dashboard-calculated-lp_D" transform="translate(86.87 -475.66)" fill="#FFF" style="mix-blend-mode:normal"></use>
            <mask id="dashboard-calculated-lp_E">
              <use xlink:href="#dashboard-calculated-lp_D" fill="#fff" transform="translate(86.87 -475.66)"></use>
            </mask>
            <g mask="url(#dashboard-calculated-lp_E)">
              <use xlink:href="#dashboard-calculated-lp_F" transform="translate(86.87 -475.66)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            </g>
          </g>
          <g style="mix-blend-mode:normal">
            <use xlink:href="#dashboard-calculated-lp_G" transform="translate(92.609 -426.979)" fill="#FFF" style="mix-blend-mode:normal"></use>
            <mask id="dashboard-calculated-lp_H">
              <use xlink:href="#dashboard-calculated-lp_G" fill="#fff" transform="translate(92.609 -426.979)"></use>
            </mask>
            <g mask="url(#dashboard-calculated-lp_H)">
              <use xlink:href="#dashboard-calculated-lp_I" transform="translate(92.609 -426.979)" fill="#A4A9A4" style="mix-blend-mode:normal"></use>
            </g>
          </g>
          <use xlink:href="#dashboard-calculated-lp_J" transform="translate(104.394 -445.702)" fill="#677067" style="mix-blend-mode:normal" opacity=".6"></use>
          <use xlink:href="#dashboard-calculated-lp_K" transform="translate(101.883 -440.085)" fill="#677067" style="mix-blend-mode:normal" opacity=".6"></use>
          <use xlink:href="#dashboard-calculated-lp_L" transform="translate(104.394 -434.468)" fill="#677067" style="mix-blend-mode:normal" opacity=".6"></use>
          <g style="mix-blend-mode:normal" transform="translate(73.478 -485.957)">
            <use xlink:href="#dashboard-calculated-lp_M" fill="#FFF" style="mix-blend-mode:normal"></use>
            <use xlink:href="#dashboard-calculated-lp_N" fill="#AE9357" style="mix-blend-mode:normal"></use>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>
like image 105
Alexander Avatar answered Sep 30 '22 13:09

Alexander
Sign in to Comment

Related questions

Set HTML canvas context via object
Pinning a section when you scroll to showcase features
Format input field "time" to not show seconds and milliseconds
is it possible to change color of png image in svg element by css or javascript?
How to bundle images using webpack?
How to make masonry layout with flexbox
Why is attributeChangedCallback called twice?
Make checkboxes required AngularJS
create div where i click within the container
How to Prevent long text label wrapping under the checkbox/radio button?
XPath is primarily used for Html or XML or XHTML?
Directory upload for Internet Explorer
Bootstrap Accordion Expand/Collapse All not functioning properly
Html vs JSP - get request header token value
How do I display the console output to HTML in Django?
Applying styles to the child of an adjacent sibling
Drag and drop in multiple browser windows / tabs
Element transforms to half-pixel and text is now blurry
Page Specific JavaScript using Content Security Policy (CSP) [duplicate]
can't get the start page highlighted asp.net | jquery | Postback de-highlighting the menu items

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!