Svg Attributes Beaten by CSS&Style in Priority

SVG attributes beaten by CSS&style in priority?

A long read from the standard: https://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

Applying a certain style to all child elements

You could go with:

svg * {
   visibility:inherit!important;
}

!important is really important there because if some of <g> had inline style this will give this style higher priority.

But I am not sure that all svg elements will accept this property, styling svg elements is little bit different than everything else.

If you would like to apply this directly as inline style you would have to use jQuery as below.

$('svg *').each(function() {
  $(this).css('visibility','inherit');
})

Why does ':last-child' change the priority of styles?

This is an issue of selector specificity.

Your first rule has two classes and a pseudo-class:

.hover:hover .attribution

And your last rule also has two classes and a pseudo-class (:last-child being that pseudo-class):

.focus_on_last_child:last-child .attribution

Since your two rules are equally specific, the one that comes later will take precedence. When you remove the :last-child pseudo-class, only the two class selectors remain and so the specificity of that rule is reduced, allowing your :hover rule to take precedence.

The simplest solution is to move your :hover rule underneath your :last-child rule, so that rule takes precedence and you won't have to make use of !important.

How to let one external stylsheet selectively overrule the other

I think your problem is in the title attribute of the link tag. You can't have multiple css files with varying titles (I see you are dynamically naming the titles for themes). They either all have to have the same title - or only the first style sheet can have a title. This is and odd bug - much better explained here:

http://blogs.telerik.com/dimodimov/posts/08-05-15/title_attributes_in_css_link_tags_prevent_styles_from_being_applied.aspx

But I am guessing removing the title attribute will completely solve your problem. This has tripped me up before.

Why does ':last-child' change the priority of styles?

This is an issue of selector specificity.

Your first rule has two classes and a pseudo-class:

.hover:hover .attribution

And your last rule also has two classes and a pseudo-class (:last-child being that pseudo-class):

.focus_on_last_child:last-child .attribution

The simplest solution is to move your :hover rule underneath your :last-child rule, so that rule takes precedence and you won't have to make use of !important.

SVG images not being clipped to width of SVG container in IE11

IE9-11 & Edge don't properly scale SVG files. You can add height, width, viewBox and CSS rules as workarounds.

I tried the overflow CSS style mentioned, and it works fine. How do you test the code? The reason it doesn't work in your side may be related to the browser cache, please try to clear IE cache and test again.

Edit: I refer to the code you provide, and it has such a problem: If you use the <g> element, I think you also need to use clip CSS to achieve the same effect.

This is a simple sample:

<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <svg class="resource-row" data-level="1" x="0" y="0" width="100%" height="576" overflow="hidden">
        <g class="task" overflow="hidden" clip-path="url(#clip)">
            <rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
            <svg class="svgs-using-def-with-image-href" x="4" y="5" width="46" overflow="hidden">
                <use href="#GreenTick" x="0" />
                <use href="#Triangle" x="18" />
                <use href="#Facebook" x="36" />
            </svg>
        </g>
    </svg>
    <svg class="reusable-icons" width="0" height="0">
        <defs>
            <rect class="task-rectangle" id="rect" width="50" height="50"></rect>
            <clipPath id="clip">
                <use xlink:href="#rect" />
            </clipPath>
            <svg id="GreenTick" width="18" height="18">
                <image href="https://svgur.com/i/XvH.svg" width="18" height="18" />
            </svg>
            <svg id="Triangle" width="18" height="18">
                <image href="https://svgur.com/i/XwA.svg" width="18" height="18" />
            </svg>
            <svg id="Facebook" width="18" height="18">
                <image href="https://svgur.com/i/Xx8.svg" width="18" height="18" />
            </svg>
        </defs>
    </svg> 
</body>
</html>

Result in IE 11:

Sample Image

Why are my SVGs in def group not showing?

<defs aren't supposed to be visible. They are definitions to be used later.

Per MDN

SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility.

Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

<svg>
  <use xlink:href = "#star"/>
</svg>

<svg style="display:none">  <defs>    <svg viewbox="0 0 18 28" id="angle-down">      <path d="M16.797 11.5q0 .203-.156.36l-7.28 7.28q-.156.156-.36.156t-.358-.156l-7.28-7.28q-.157-.157-.157-.36t.156-.36l.782-.78q.156-.156.36-.156t.358.156L9 16.5l6.142-6.14q.156-.156.36-.156t.358.156l.78.78q.157.157.157.36z" />    </svg>    <svg viewbox="0 0 18 28" id="angle-up">      <path d="M16.797 18.5q0 .203-.156.36l-.78.78q-.156.156-.36.156t-.358-.156l-6.14-6.14-6.142 6.14q-.156.156-.36.156t-.358-.156l-.78-.78q-.157-.157-.157-.36t.156-.36l7.282-7.28q.156-.156.36-.156t.358.156l7.28 7.28q.157.157.157.36z" />    </svg>    <svg viewbox="0 0 32 32" id="area">      <path d="M19.556 16a3.556 3.556 0 1 1-7.112 0 3.556 3.556 0 0 1 7.112 0z" />      <path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16h-2.37c0 7.527-6.102 13.63-13.63 13.63S2.37 23.528 2.37 16C2.37 8.473 8.472 2.37 16 2.37V0z" />      <path d="M16 5.926c-5.564 0-10.074 4.51-10.074 10.074S10.436 26.074 16 26.074 26.074 21.564 26.074 16h-2.37a7.704 7.704 0 0 1-15.408 0A7.704 7.704 0 0 1 16 8.296v-2.37z" />      <path d="M17.185 15.704V0h-2.37v16.89h2.37v-1.186z" />    </svg>    <svg viewbox="0 0 24 28" id="bullseye">      <path d="M16 14q0 1.656-1.172 2.828T12 18t-2.828-1.172T8 14t1.172-2.828T12 10t2.828 1.172T16 14zm2 0q0-2.484-1.758-4.242T12 8 7.758 9.758 6 14t1.758 4.242T12 20t4.242-1.758T18 14zm2 0q0 3.313-2.344 5.656T12 22t-5.656-2.344T4 14t2.344-5.656T12 6t5.656 2.344T20 14zm2 0q0-2.03-.797-3.883T19.07 6.93t-3.187-2.133T12 4t-3.883.797T4.93 6.93t-2.133 3.187T2 14t.797 3.883T4.93 21.07t3.187 2.133T12 24t3.883-.797 3.187-2.133 2.133-3.187T22 14zm2 0q0 3.266-1.61 6.023t-4.366 4.367T12 26 5.98 24.39 1.61 20.023.003 14t1.61-6.023T5.977 3.61 12 2t6.024 1.61 4.367 4.367T24 14z"      />    </svg>    <svg viewbox="0 0 19 28" id="chevron-right">      <path d="M17.297 13.703L5.703 25.297q-.297.297-.703.297t-.703-.297l-2.594-2.594q-.297-.297-.297-.703t.297-.703L10 13 1.703 4.703Q1.406 4.406 1.406 4t.297-.703L4.297.703Q4.594.406 5 .406t.703.297l11.594 11.594q.297.297.297.703t-.297.703z" />    </svg>    <svg viewbox="0 0 32 32" id="close">      <path d="M18.208 16l13.66 13.66-2.21 2.207L16 18.207 2.34 31.868.134 29.66 13.793 16 .132 2.34 2.34.134 16 13.793 29.66.132l2.207 2.208L18.207 16z" />    </svg>    <svg viewbox="0 0 22 28" id="close_bold">      <path d="M20.28 20.656q0 .625-.437 1.062l-2.125 2.125q-.438.438-1.062.438t-1.062-.437L11 19.25l-4.594 4.593q-.438.438-1.062.438t-1.062-.437l-2.125-2.125q-.438-.438-.438-1.062t.437-1.062L6.75 15l-4.593-4.594q-.438-.438-.438-1.062t.437-1.062l2.125-2.125q.438-.438 1.062-.438t1.062.437L11 10.75l4.594-4.593q.438-.438 1.062-.438t1.062.437l2.125 2.125q.438.438.438 1.062t-.437 1.062L15.25 15l4.593 4.594q.438.438.438 1.062z"      />    </svg>    <svg viewbox="0 0 32 32" id="location">      <path d="M16.187 21.708a5.522 5.522 0 1 0-5.52-5.52 5.52 5.52 0 0 0 5.52 5.52z" />      <path d="M16.072 28.59c6.913 0 12.517-5.605 12.517-12.518S22.984 3.555 16.07 3.555 3.555 9.16 3.555 16.072 9.16 28.59 16.072 28.59zm0-2.37c-5.604 0-10.146-4.544-10.146-10.147S10.47 5.927 16.072 5.927c5.604 0 10.146 4.543 10.146 10.146S21.675 26.22 16.072 26.22z"      />      <path d="M29.158 17.778H32v-3.556h-4.148v3.556h1.306zm-14.936 11.38V32h3.556v-4.148h-3.556v1.306zm0-27.676v3.225h3.556V0h-3.556v1.482zM1.306 17.778h2.842v-3.556H0v3.556h1.306z" />    </svg>    <svg viewbox="0 0 32 32" id="location_searching">      <path d="M16.072 28.59c6.913 0 12.517-5.605 12.517-12.518S22.984 3.555 16.07 3.555 3.555 9.16 3.555 16.072 9.16 28.59 16.072 28.59zm0-2.37c-5.604 0-10.146-4.544-10.146-10.147S10.47 5.927 16.072 5.927c5.604 0 10.146 4.543 10.146 10.146S21.675 26.22 16.072 26.22z"      />      <path d="M29.158 17.778H32v-3.556h-4.148v3.556h1.306zm-14.936 11.38V32h3.556v-4.148h-3.556v1.306zm0-27.677v3.226h3.556V0h-3.556v1.48zM1.306 17.78h2.842v-3.556H0v3.556h1.306z" />    </svg>    <svg viewbox="0 0 36 32" id="messages">      <path d="M24.542 28.9c0 .617-.52 1.118-1.16 1.118H3.22c-.64 0-1.16-.5-1.16-1.117V3.205c0-.616.52-1.116 1.16-1.116H23.38c.64 0 1.16.5 1.16 1.116V9.13l-6.188 5.957 3.713 3.574 2.475-2.378v12.62zM34.93 4.05l-1.387-1.335c-.642-.618-1.632-.676-2.2-.13l-4.74 4.563V3.204c0-1.71-1.444-3.1-3.22-3.1H3.22C1.444.105 0 1.495 0 3.205V28.9C0 30.61 1.444 32 3.22 32h20.163c1.775 0 3.22-1.39 3.22-3.1V14.3l8.46-8.134c.57-.546.508-1.5-.134-2.117z"      />      <path d="M16.17 19.797c-.238.757.21 1.192 1 .963l3.896-1.134-3.714-3.573-1.182 3.744zM4.925 7.847H21.02c.57 0 1.03-.445 1.03-.993s-.46-.992-1.03-.992H4.926c-.57 0-1.03.444-1.03.992s.46.992 1.03.992zM21.02 24.08H4.926c-.57 0-1.03.444-1.03.993 0 .547.46.992 1.03.992H21.02c.57 0 1.03-.445 1.03-.992 0-.548-.46-.992-1.03-.992zM4.926 13.92H15.06c.567 0 1.03-.444 1.03-.992s-.463-.992-1.03-.992H4.924c-.57 0-1.03.444-1.03.992s.46.992 1.03.992zm0 6.073h8.24c.57 0 1.03-.444 1.03-.99 0-.55-.46-.993-1.03-.993h-8.24c-.57 0-1.03.443-1.03.992 0 .546.46.99 1.03.99z"      />    </svg>    <svg viewbox="0 0 22 28" id="minus">      <path d="M22 11.5v3q0 .625-.438 1.062T20.5 16h-19q-.625 0-1.062-.438T0 14.5v-3q0-.625.438-1.062T1.5 10h19q.625 0 1.062.438T22 11.5z" />    </svg>    <svg viewbox="0 0 24 32" id="place_edit">      <path d="M0 11.2C0 5.008 5.366 0 12 0s12 5.008 12 11.2C24 19.6 12 32 12 32S0 19.6 0 11.2zm4.32 5.657l2.868 1.135 10.56-6.327-2.555-4.213-10.54 6.322-.332 3.082zm14.79-8.89c-.978-1.625-1.795-1.795-1.795-1.795l-1.054.634 2.54 4.23 1.054-.637s.215-.838-.745-2.433z"      />    </svg>    <svg viewbox="0 0 23 32" id="place_full">      <path d="M11.2 0C5.008 0 0 5.008 0 11.2 0 19.6 11.2 32 11.2 32s11.2-12.4 11.2-20.8C22.4 5.008 17.392 0 11.2 0zm0 16a4.8 4.8 0 0 1 0-9.6 4.8 4.8 0 0 1 0 9.6z" />    </svg>    <svg viewbox="0 0 23 32" id="place_outline">      <path d="M11.32 0A11.314 11.314 0 0 0 0 11.32c0 1.93.57 4.096 1.614 6.468.907 2.058 2.15 4.224 3.65 6.444a67.917 67.917 0 0 0 5.16 6.68l.897.993.897-.992a26.42 26.42 0 0 0 .454-.518 67.917 67.917 0 0 0 4.708-6.163c1.497-2.22 2.742-4.386 3.648-6.444 1.045-2.372 1.614-4.538 1.614-6.467C22.642 5.064 17.58 0 11.322 0zm0 2.415a8.9 8.9 0 0 1 8.907 8.906c0 1.546-.488 3.403-1.41 5.494-.84 1.91-2.017 3.957-3.44 6.067a65.305 65.305 0 0 1-4.952 6.414h1.792a58.188 58.188 0 0 1-1.54-1.82 65.305 65.305 0 0 1-3.41-4.594c-1.425-2.11-2.6-4.155-3.442-6.066-.92-2.09-1.41-3.947-1.41-5.493a8.9 8.9 0 0 1 8.907-8.905zm0 12.032a3.128 3.128 0 1 1 0-6.253 3.128 3.128 0 0 1 0 6.253zm0 2.416A5.543 5.543 0 1 0 5.78 11.32a5.543 5.543 0 0 0 5.543 5.543z"      />    </svg>    <svg viewbox="0 0 30 32" id="place_show_all">      <path d="M0 31.902V5.852L10.54.426l8.64 4.788L30.157.57v26.532L19.18 31.937l-8.797-4.086L0 31.903zM2.416 7.314V28.27l7.993-3.218.09-22.003-8.085 4.263zm16.957.51V29.23l8.516-3.773.07-21.356-8.587 3.724z" />    </svg>    <svg viewbox="0 0 22 28" id="plus">      <path d="M22 11.5v3q0 .625-.438 1.062T20.5 16H14v6.5q0 .625-.438 1.062T12.5 24h-3q-.625 0-1.062-.438T8 22.5V16H1.5q-.625 0-1.062-.438T0 14.5v-3q0-.625.438-1.062T1.5 10H8V3.5q0-.625.438-1.062T9.5 2h3q.625 0 1.062.438T14 3.5V10h6.5q.625 0 1.062.438T22 11.5z"      />    </svg>    <svg viewbox="0 0 37 32" id="recover">      <path d="M4.84 16.556C5.133 25.136 12.18 32 20.83 32c8.838 0 16-7.163 16-16s-7.162-16-16-16c-3.23 0-6.32.96-8.942 2.73l1.35 2.003a13.517 13.517 0 0 1 7.592-2.317c7.503 0 13.585 6.082 13.585 13.585S28.333 29.587 20.83 29.587c-7.318 0-13.284-5.786-13.574-13.032l5.323-.007-6.283-8.093L0 16.564l4.84-.007z"      />    </svg>    <svg viewbox="0 0 32 32" id="regio_logo">      <path d="M13.944 25.756L16 28.488l2.056-2.732h7.253L29.963 32H2.037l4.655-6.244h7.253zM16 6.244c-2.133 0-3.88 1.756-3.88 3.902s1.746 3.902 3.88 3.902c2.133 0 3.88-1.756 3.88-3.902S18.133 6.244 16 6.244zm8.533 9.366L16 27.317 7.467 15.61h.04a10.024 10.024 0 0 1-1.59-5.463C5.916 4.527 10.414 0 16 0S26.087 4.53 26.087 10.148c0 2.03-.582 3.902-1.59 5.463h.04z"      />    </svg>    <svg viewbox="0 0 26 28" id="star">      <path d="M26 10.11q0 .343-.406.75l-5.672 5.53 1.344 7.812q.016.11.016.313 0 .328-.164.555t-.477.227q-.296 0-.624-.187L13 21.423 5.984 25.11q-.344.187-.625.187-.33 0-.493-.227t-.164-.555q0-.094.03-.313L6.08 16.39.39 10.86Q0 10.436 0 10.11q0-.58.874-.72l7.844-1.14 3.516-7.11Q12.53.5 13 .5t.766.64l3.516 7.11 7.844 1.14q.875.14.875.72z"      />    </svg>  </defs></svg>
<svg> <use xlink:href="#star" /></svg>

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.

Svg Attributes Beaten by CSS&Style in Priority