Заполнение вращающегося круглого SVG с рисунком

Question

Итак, у меня есть этот текст, который вращается вокруг этого круга, используя SVG. Я хотел бы заполнить его изображением, чтобы сделать его менее мягким. Это код, который у меня есть в моем HTML.

    <div id="container">
        <div id="circle">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
                height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
                <defs>
                    <pattern id='my_portrait'>
                        <image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
                        width="380" height="267" />
                    </pattern>                        
                    <path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " />
                </defs>
                <circle cx="150" cy="100" r="75" fill="none"/>
                <g id="rotating_text">
                    <use xlink:href="#circlePath" fill="rgb(81,84,77)"  stroke="black" stroke-width="2px"/>
                    <text fill="#000">
                        <textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>                            
                    </text>
                </g>
            </svg>
        </div>
    </div>

И это CSS, определяющий скорость и поддержку браузера.

    #circle svg {    
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(360deg);
    }
    to {
        -webkit-transform: rotate(0);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(360deg);
    }
    to {
        -moz-transform: rotate(0);
    }
}

@-ms-keyframes rotate {
    from {
        -ms-transform: rotate(360deg);
    }
    to {
        -ms-transform: rotate(0);
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(360deg);
    }
    to {
        -o-transform: rotate(0);
    }
}

@keyframes rotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0);
    }
}

Я пробовал несколько разных способов, чтобы попытаться заполнить внутренний круг, но, кажется, ничто не имеет значения. Любая помощь будет с благодарностью!

Answer 1

добавить patternUnits="userSpaceOnUse" height="380" width="267" in my_portrait а также добавить fill="url(#my_portrait)" в circlePath

#circle svg {    
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(360deg);
    }
    to {
        -webkit-transform: rotate(0);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(360deg);
    }
    to {
        -moz-transform: rotate(0);
    }
}

@-ms-keyframes rotate {
    from {
        -ms-transform: rotate(360deg);
    }
    to {
        -ms-transform: rotate(0);
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(360deg);
    }
    to {
        -o-transform: rotate(0);
    }
}

@keyframes rotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0);
    }
}

<div id="container">
        <div id="circle">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
                height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
                <defs>
                    <pattern id='my_portrait' patternUnits="userSpaceOnUse" height="380" width="267">
                        <image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
                        width="380" height="267"  />
                    </pattern>                        
                    <path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " fill="url(#my_portrait)" />
                </defs>
                <circle cx="150" cy="100" r="75" fill="none"/>
                <g id="rotating_text">
                    <use xlink:href="#circlePath" fill="rgb(81,84,77)"  stroke="black" stroke-width="2px"/>
                    <text fill="#000">
                        <textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>                            
                    </text>
                </g>
            </svg>
        </div>
    </div>