You should embed the image by using `&lt;object&gt;` tag:

    &lt;object data=&quot;algerie.svg&quot; type=&quot;image/svg+xml&quot;&gt;&lt;/object&gt;

Refer to this question for the details: https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files

Is it possible to get a partial view of a `dict` in Python analogous of pandas `df.tail()/df.head()`. Say you have a very long `dict`, and you just want to check some of the elements (the beginning, the end, etc) of the `dict`. Something like:

    dict.head(3)  # To see the first 3 elements of the dictionary.

    {[1,2], [2, 3], [3, 4]}

Thanks


In Python how to obtain a partial view of a dict?

I&#39;m doing a small project to play around the goody bag the ES6 is bringing, I&#39;m trying to set register a class as an angular directive, but I&#39;m running into this error &quot;TypeError: Cannot call a class as a function&quot;, but from the examples I&#39;m finding they just write the class and register it with angular as a directive. Here&#39;s my directive.

    class dateBlock {
      constructor () {
        this.template = &#39;/app/dateblock/dateblock.html&#39;;
        this.restrict = &#39;AE&#39;;
        this.scope = {};
      }
    };

    export default dateBlock

and my index where I import it and then declare it.

    import calendarController from &#39;./calendar/calendar.js&#39;
    import dateBlock from &#39;./dateblock/dateblock.js&#39;

    function setup($stateProvider) {
        $stateProvider
          .state(&#39;base&#39;, {
            url: &#39;&#39;,
            controller: calendarController,
            templateUrl: &#39;/app/calendar/calendar.html&#39;
          });
        };

    setup.$inject = [&#39;$stateProvider&#39;]

    var app = angular.module(&#39;calApp&#39;,[&#39;ngAnimate&#39;,&#39;ui.router&#39;,&#39;hmTouchEvents&#39;, &#39;templates&#39;])
      .config(setup)
      .controller(&#39;calendarController&#39;, calendarController)
      .directive(&#39;dateBlock&#39;, dateBlock)

If I missed some crucial step I&#39;d love to hear it. Also side question is it cleaner to import all the apps components to the index and register them all there or export the app and import and register within the components?


Using ES6 Classes as Angular 1.x directives

I try to make an HTML that references to an SVG file, that SVG file is interactive (CSS hover):

 1. If I use `&lt;img src=&quot;algerie.svg&quot;&gt;` I loose the interactivity.

 ![SVG displayed as image embedded in an HTML page][1]

 2. If I open this image in a new tab using dev tool, it becomes interactive.

 ![SVG opened in the browser, showing interactive highlights][2]

 3. If I use:

        &lt;svg viewBox=&quot;0 0 512 512&quot;&gt;
          &lt;use xlink:href=&quot;algerie.svg&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;

 Then nothing is shown, and worse, Chrome or Firefox do not detect the file in the network dev tool.


  [1]: http://i.stack.imgur.com/xyAHtm.jpg
  [2]: http://i.stack.imgur.com/olCa7m.jpg

How to use external SVG in HTML?

I try to make an HTML that references to an SVG file, that SVG file is interactive (CSS hover):
<ol>
<li>If I use <code>&#x3C;img src="algerie.svg"></code> I loose the interactivity.</li>
</ol>
<img src="http://i.stack.imgur.com/xyAHtm.jpg" alt="SVG displayed as image embedded in an HTML page">
<ol start="2">
<li>If I open this image in a new tab using dev tool, it becomes interactive.</li>
</ol>
<img src="http://i.stack.imgur.com/olCa7m.jpg" alt="SVG opened in the browser, showing interactive highlights">
<ol start="3">
<li>
If I use:
<pre><code class="hljs language-ini">&#x3C;svg viewBox="0 0 512 512">
 &#x3C;use xlink:href="algerie.svg">&#x3C;/use>
&#x3C;/svg>
</code></pre>
</li>
</ol>
Then nothing is shown, and worse, Chrome or Firefox do not detect the file in the network dev tool.

I&#39;m using flexbox to align my child elements. What I&#39;d like to do is center one element and leave the other aligned to the very left. Normally I would just set the left element using `margin-right: auto`. The problem is that pushes the center element off center. Is this possible **without** using absolute positioning?

**HTML &amp; CSS**

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #parent {
      align-items: center;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      width: 500px;
    }
    #left {
      margin-right: auto;
    }
    #center {
      margin: auto;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;parent&quot;&gt;
      &lt;span id=&quot;left&quot;&gt;Left&lt;/span&gt;
      &lt;span id=&quot;center&quot;&gt;Center&lt;/span&gt;
    &lt;/div&gt;



&lt;!-- end snippet --&gt;



Aligning elements left and center with flexbox

I am trying to get the inner text of HTML string, using a JS function(the string is passed as an argument). Here is the code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function extractContent(value) {
      var content_holder = &quot;&quot;;

      for (var i = 0; i &lt; value.length; i++) {
        if (value.charAt(i) === &#39;&gt;&#39;) {
          continue;
          while (value.charAt(i) != &#39;&lt;&#39;) {
            content_holder += value.charAt(i);
          }
        }

      }
      console.log(content_holder);
    }

    extractContent(&quot;&lt;p&gt;Hello&lt;/p&gt;&lt;a href=&#39;http://w3c.org&#39;&gt;W3C&lt;/a&gt;&quot;);

&lt;!-- end snippet --&gt;

The problem is that nothing gets printed on the `console(*content_holder* stays empty)`. I think the problem is caused by the `===` operator.



Extract the text out of HTML string using JavaScript

With typical CSS I could float one of two columns left and another right with some gutter space in-between. How would I do that with flexbox?

http://jsfiddle.net/1sp9jd32/

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #container {
      width: 500px;
      border: solid 1px #000;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
    #a {
      width: 20%;
      border: solid 1px #000;
    }
    #b {
      width: 20%;
      border: solid 1px #000;
      height: 200px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
      &lt;div id=&quot;a&quot;&gt;
        a
      &lt;/div&gt;
      &lt;div id=&quot;b&quot;&gt;
        b
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to align flexbox columns left and right?

I&#39;m trying to inspect CSS properties from an input into a table cell. The input appears on click and disappears on lost focus, as when I try to inspect it.
How can I do it to don&#39;t lost focus while I move to another window (the inspector)?


How can I inspect html element that disappears from DOM on lost focus?



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .content {
      float: left;
      width: 100%;
      background-image: url(&#39;images/zwemmen.png&#39;);
      height: 501px;
      -webkit-filter: blur(3px);
      -moz-filter: blur(3px);
      -o-filter: blur(3px);
      -ms-filter: blur(3px);
      filter: blur(3px);
    }

    .opacity {
      background-color: rgba(5, 98, 127, 0.9);
      height: 100%;
      overflow: hidden;
    }

    .info {
      float: left;
      margin: 100px 0px 0px 30px;
      width: 410px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;content&quot;&gt;
      &lt;div class=&quot;opacity&quot;&gt;
        &lt;div class=&quot;image&quot;&gt;
          &lt;img src=&quot;images/zwemmen.png&quot; alt=&quot;&quot; /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;info&quot;&gt;
          a div wih all sort of information
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

If I do not want to blur the button, what do I need to do?



How to blur(css) div without blur child element

Bootstrap&#39;s global default font-size is 14px, with a line-height of 1.428. How can I change its default global settings?

Will I have to change bootstrap.min.css in all the multiple entries?

How to change Bootstrap&#39;s global default font size?

How do I get a flex box to not be part of the page until I fade it in? I used to do this with &#39;display: 0;&#39; and then use jQuery .fadeIn(). But now if I set display to 0, when I fade it in, of course I lose the flex-iness of the box. If I use jQuery to set display to flex, then it will just appear, not fade in.

HTML
----
```HTML
&lt;div class=&quot;&quot; id=&quot;popupContainer&quot;&gt;
    &lt;div class=&quot;flex-item-popup&quot; id=&quot;popup&quot;&gt;
		&lt;div class=&quot;close&quot;&gt;&lt;i class=&quot;fa fa-2x fa-times-circle&quot;&gt;&lt;/i&gt;&lt;/div&gt;
		&lt;h2&gt;&lt;/h2&gt;
		&lt;div class=&#39;text&#39;&gt;&lt;/div&gt;
		&lt;div class=&quot;videos&quot;&gt;&lt;/div&gt;
		&lt;div class=&quot;flex-container images&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
```
CSS
---
```CSS
#popupContainer {
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
	display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    z-index: 15;
}
```
jQuery
------
```JavaScript
$(document).ready(function() {
    //???
});
```

how fade in a flex box?

I am trying to get a wipe up animation to make a circle look like **it&#39;s filling with water**. I&#39;ve run into two errors, and haven&#39;t been able to even tackle the 3rd one:

 1. It fills up the wrong way
 2. &lt;strike&gt;It resets to empty (black) after it has filled&lt;/strike&gt; *
 3. For now, I am using the `&lt;img&gt;` tags, but I would like to move this effect to `body { background-image: }` and need some direction on how to do this.

[What I have tried so far:][1] 


&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #banner {
      width: 300px;
      height: 300px;
      position: relative;
    }
    #banner div {
      position: absolute;
    }
    #banner div:nth-child(2) {
      -webkit-animation: wipe 6s;
      -webkit-animation-delay: 0s;
      -webkit-animation-direction: up;
      -webkit-mask-size: 300px 3000px;
      -webkit-mask-position: 300px 300px;
      -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)));
    }
    @-webkit-keyframes wipe {
      0% {
        -webkit-mask-position: 0 0;
      }
      100% {
        -webkit-mask-position: 300px 300px;
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;banner&quot;&gt;
      &lt;div&gt;
        &lt;img src=&quot;http://i.imgur.com/vklf6kK.png&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src=&quot;http://i.imgur.com/uszeRpk.png&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

---

Giving it a default mask position as [@anpsmn][2] suggested, doesn&#39;t reset it to black anymore.

  [1]: http://jsfiddle.net/um0rnL56/1/
  [2]: https://stackoverflow.com/users/473016/anpsmn

Filling water animation

![T-shirt with Flash symbol][1]


  [1]: http://i.stack.imgur.com/5K8oG.gif

I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the T-shirt worn by _Big Bang Theory_&#39;s Sheldon Cooper) in CSS.

This is going to act like a star rating system, only a &#39;lightning rating system&#39; instead.

However, since I&#39;m trying to keep the HTML to a minimum, I&#39;d like to style this in CSS only.

I have got to the stage of:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    html,
    body {
      margin: 0;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    }
    .wrap {
      height: 50vw;
      width: 50vw;
      position: relative;
      margin: 0 auto;
    }
    .circ:hover{
      background:gray;
      }
    .circ:hover .bolt{
      background:gold;
      }
    .circ {
      height: 50%;
      width: 50%;
      background: white;
      border: 5px solid black;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow:0 0 10px 2px black;
    }
    .bolt {
      position: absolute;
      top: 5%;
      left: 50%;
      height: 70%;
      width: 30%;
      background: yellow;
      border: 2px solid black;
      border-bottom: none;
      transform: perspective(200px) skewX(-10deg) rotateX(15deg);
    }
    .bolt:before {
      content: &quot;&quot;;
      position: absolute;
      top: 90%;
      left: 20%;
      height: 50%;
      width: 100%;
      background: inherit;
      border: 2px solid black;
      transform:  ;
    }
    /*
    .bolt:after{
      content:&quot;&quot;;
      position:absolute;
      top:-40%;left:20%;
      height:50%;
      width:100%;
      background:inherit;
      transform:perspective(50px) skewX(-10deg) rotateX(45deg);
      }*/

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js&quot;&gt;&lt;/script&gt;
    &lt;div class=&quot;wrap&quot;&gt;

      &lt;div class=&quot;circ&quot;&gt;

        &lt;div class=&quot;bolt&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

but do not know how to continue from here.

I&#39;ve attempted using the `perspective` property, although I don&#39;t think I&#39;ve quite got a handle on it as of yet - mainly because I&#39;m slightly confused as to what it is doing to the `:before` and `:after` properties when it is applied to the parent.

I have chosen CSS for this as the white background and bolt colour will be changing on click, and because I know how to do that with CSS.

(I know SVG may be a better option here, but I have not been able to learn this due to time restrictions, so I&#39;d prefer to use &#39;what I know how to use&#39;, which is, CSS)

Create a lightning bolt design (like The Flash)

How do I create a shape like this to display on a webpage?  

I don&#39;t want to use **images** since they would get blurry on scaling  

![Teardrop shape I need to make with HTML, CSS or SVG][1]

I tried with *CSS*:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .tear {
      display: inline-block;
      transform: rotate(-30deg);
      border: 5px solid green;
      width: 50px;
      height: 100px;
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;tear&quot;&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

That turned out really screwed.

And then I tried with SVG:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;svg viewBox=&quot;0 100 100&quot;&gt;
      &lt;polygon points=&quot;50,0 100,70 50,100 0,70&quot;/&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;

It did get the shape, but the bottom part wasn&#39;t curved.

Is there a way to create this shape so it can be used in an HTML page?

  [1]: http://i.stack.imgur.com/3dFQ5.png


How do I create a teardrop in HTML?

I&#39;m setting a SVG as `background-image` for a pseudo element:

    content: &#39;&#39;;
    position: absolute;
     right: 0;
    bottom: 0;
      left: 0;
    width: 100%;
    height: 12px;
    background-image: url(&#39;data:image/svg+xml;utf8,&lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 620 12&quot; enable-background=&quot;new 0 0 620 12&quot; xml:space=&quot;preserve&quot;&gt;&lt;g&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;48.8,12 0,12 0,0 54.1,0&quot;/&gt;&lt;polygon fill=&quot;#952592&quot; points=&quot;93.8,12 44,12 49.3,0 99.1,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;133.5,12 83.7,12 89,0 138.8,0&quot;/&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;156.3,12 106.5,12 111.8,0 161.6,0&quot;/&gt;&lt;polygon fill=&quot;#40BFC2&quot; points=&quot;201,12 151.3,12 156.5,0 206.3,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;216.4,12 166.6,12 171.9,0 221.7,0&quot;/&gt;&lt;polygon fill=&quot;#952592&quot; points=&quot;226.5,12 176.7,12 182,0 231.7,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;241.3,12 191.5,12 196.8,0 246.6,0&quot;/&gt;&lt;polygon fill=&quot;#40BFC2&quot; points=&quot;260.9,12 211.1,12 216.4,0 266.2,0&quot;/&gt;&lt;polygon fill=&quot;#952592&quot; points=&quot;282.6,12 232.9,12 238.1,0 287.9,0&quot;/&gt;&lt;polygon fill=&quot;#952592&quot; points=&quot;282.6,12 232.9,12 238.1,0 287.9,0&quot;/&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;318.6,12 268.9,12 274.2,0 323.9,0&quot;/&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;318.6,12 268.9,12 274.2,0 323.9,0&quot;/&gt;&lt;polygon fill=&quot;#40BFC2&quot; points=&quot;364.2,12 314.4,12 319.7,0 369.5,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;368.1,12 318.3,12 323.6,0 373.4,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;368.1,12 318.3,12 323.6,0 373.4,0&quot;/&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;378.5,12 328.7,12 334,0 383.8,0&quot;/&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;378.5,12 328.7,12 334,0 383.8,0&quot;/&gt;&lt;polygon fill=&quot;#40BFC2&quot; points=&quot;424.8,12 375,12 380.3,0 430.1,0&quot;/&gt;&lt;polygon fill=&quot;#40BFC2&quot; points=&quot;424.8,12 375,12 380.3,0 430.1,0&quot;/&gt;&lt;polygon fill=&quot;#952592&quot; points=&quot;430.1,12 380.3,12 385.6,0 435.4,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;465.6,12 415.8,12 421.1,0 470.9,0&quot;/&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;488.3,12 438.5,12 443.8,0 493.6,0&quot;/&gt;&lt;polygon fill=&quot;#D11A3C&quot; points=&quot;620,12 613.4,12 618.7,0 620,0&quot;/&gt;&lt;polygon fill=&quot;#40BFC2&quot; points=&quot;534.2,12 484.5,12 489.8,0 539.5,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;548,12 498.2,12 503.5,0 553.3,0&quot;/&gt;&lt;polygon fill=&quot;#952592&quot; points=&quot;556.5,12 506.7,12 512,0 561.8,0&quot;/&gt;&lt;polygon fill=&quot;#1E65AF&quot; points=&quot;573.8,12 524.1,12 529.4,0 579.1,0&quot;/&gt;&lt;polygon fill=&quot;#40BFC2&quot; points=&quot;592.5,12 542.8,12 548.1,0 597.8,0&quot;/&gt;&lt;polygon fill=&quot;#952592&quot; points=&quot;614.4,12 564.6,12 569.9,0 619.7,0&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;&#39;);
    background-repeat: repeat-x;
    background-position: bottom;

but for some reason it does not show up on Firefox. I do not wanna use a base64 data-url. Isn&#39;t this possible at all in Firefox?

SVG data image not working as a background-image in a pseudo element

I have found a myriad of libraries in order to use SVG images in Android and avoid the frustrating creation of different resolutions and dropping files for each resolution. This becomes very annoying when the app has many icons or images.

What would be a step-by-step process of the simplest-to-use library for using SVG images in Android?

Also I use Android Studio and [Illustrator][1] for generating my icons and images.

  [1]: https://en.wikipedia.org/wiki/Adobe_Illustrator






Content Type	Original Author	Original Content on Stackoverflow
Question	Abdelouahab	View Question on Stackoverflow
Solution 1 - Html	NikitaBaksalyar	View Answer on Stackoverflow

How to use external SVG in HTML?

Html Problem Overview

Html Solutions

Solution 1 - Html

Using ES6 Classes as Angular 1.x directives

In Python how to obtain a partial view of a dict?

Attributions