SVG: pattern filling is not working with “use”
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I have icon.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"> <image xlink:href="..." x="0" y="0" width="53" height="111"/></pattern>
<path fill="url(#patt)" d="..."/>
</symbol>
</svg>
And then I use part of icon.svg in html via "use":
<svg>
<use xlink:href="/assets/images/icon.svg#icon_page"></use>
</svg>
And pattern filling is not working. Without filling I see figure, but with filling - nothing. If I put svg code direct to html, it work's fine:
<svg>
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"><image xlink:href="..." x="0" y="0" width="53" height="111"></image></pattern>
<path fill="url(#patt)" d="..."></path>
</symbol>
<use xlink:href="#icon_page"></use>
</svg>
Have somebody any idea? Thanks in advance!
svg
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
add a comment |
1
I have icon.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"> <image xlink:href="..." x="0" y="0" width="53" height="111"/></pattern>
<path fill="url(#patt)" d="..."/>
</symbol>
</svg>
And then I use part of icon.svg in html via "use":
<svg>
<use xlink:href="/assets/images/icon.svg#icon_page"></use>
</svg>
And pattern filling is not working. Without filling I see figure, but with filling - nothing. If I put svg code direct to html, it work's fine:
<svg>
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"><image xlink:href="..." x="0" y="0" width="53" height="111"></image></pattern>
<path fill="url(#patt)" d="..."></path>
</symbol>
<use xlink:href="#icon_page"></use>
</svg>
Have somebody any idea? Thanks in advance!
svg
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
1
try taking the pattern out of the symbol into the parent svg element.
– Robert Longson
Nov 26 '18 at 17:21
How do you link the image resource inside the pattern? Is that an external file? What is the relative path to the icon.svg file?
– ccprog
Nov 26 '18 at 17:39
@ccprog thanks for answer! For pattern image I write absolute URL, this image is in files of my site. I tried use images from other sites - that not working too. Relative path to the icon.svg is '/assets/images/icon.svg' - and that works, because without pattern I see my image
– MRaimon
Nov 27 '18 at 4:58
@RobertLongson thanks for feedback! I tried to do what you say too, but unfortunately it is not working.
– MRaimon
Nov 27 '18 at 6:36
add a comment |
1
1
1
I have icon.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"> <image xlink:href="..." x="0" y="0" width="53" height="111"/></pattern>
<path fill="url(#patt)" d="..."/>
</symbol>
</svg>
And then I use part of icon.svg in html via "use":
<svg>
<use xlink:href="/assets/images/icon.svg#icon_page"></use>
</svg>
And pattern filling is not working. Without filling I see figure, but with filling - nothing. If I put svg code direct to html, it work's fine:
<svg>
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"><image xlink:href="..." x="0" y="0" width="53" height="111"></image></pattern>
<path fill="url(#patt)" d="..."></path>
</symbol>
<use xlink:href="#icon_page"></use>
</svg>
Have somebody any idea? Thanks in advance!
svg
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
I have icon.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"> <image xlink:href="..." x="0" y="0" width="53" height="111"/></pattern>
<path fill="url(#patt)" d="..."/>
</symbol>
</svg>
And then I use part of icon.svg in html via "use":
<svg>
<use xlink:href="/assets/images/icon.svg#icon_page"></use>
</svg>
And pattern filling is not working. Without filling I see figure, but with filling - nothing. If I put svg code direct to html, it work's fine:
<svg>
<symbol id="icon_page" viewBox="0 0 221 118">
<pattern id="patt" patternUnits="userSpaceOnUse" width="53" height="111"><image xlink:href="..." x="0" y="0" width="53" height="111"></image></pattern>
<path fill="url(#patt)" d="..."></path>
</symbol>
<use xlink:href="#icon_page"></use>
</svg>
Have somebody any idea? Thanks in advance!
svg
svg
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
asked Nov 26 '18 at 16:39
MRaimonMRaimon
517
517
1
try taking the pattern out of the symbol into the parent svg element.
– Robert Longson
Nov 26 '18 at 17:21
How do you link the image resource inside the pattern? Is that an external file? What is the relative path to the icon.svg file?
– ccprog
Nov 26 '18 at 17:39
@ccprog thanks for answer! For pattern image I write absolute URL, this image is in files of my site. I tried use images from other sites - that not working too. Relative path to the icon.svg is '/assets/images/icon.svg' - and that works, because without pattern I see my image
– MRaimon
Nov 27 '18 at 4:58
@RobertLongson thanks for feedback! I tried to do what you say too, but unfortunately it is not working.
– MRaimon
Nov 27 '18 at 6:36
add a comment |
1
try taking the pattern out of the symbol into the parent svg element.
– Robert Longson
Nov 26 '18 at 17:21
How do you link the image resource inside the pattern? Is that an external file? What is the relative path to the icon.svg file?
– ccprog
Nov 26 '18 at 17:39
@ccprog thanks for answer! For pattern image I write absolute URL, this image is in files of my site. I tried use images from other sites - that not working too. Relative path to the icon.svg is '/assets/images/icon.svg' - and that works, because without pattern I see my image
– MRaimon
Nov 27 '18 at 4:58
@RobertLongson thanks for feedback! I tried to do what you say too, but unfortunately it is not working.
– MRaimon
Nov 27 '18 at 6:36
1
1
try taking the pattern out of the symbol into the parent svg element.
– Robert Longson
Nov 26 '18 at 17:21
try taking the pattern out of the symbol into the parent svg element.
– Robert Longson
Nov 26 '18 at 17:21
How do you link the image resource inside the pattern? Is that an external file? What is the relative path to the icon.svg file?
– ccprog
Nov 26 '18 at 17:39
How do you link the image resource inside the pattern? Is that an external file? What is the relative path to the icon.svg file?
– ccprog
Nov 26 '18 at 17:39
@ccprog thanks for answer! For pattern image I write absolute URL, this image is in files of my site. I tried use images from other sites - that not working too. Relative path to the icon.svg is '/assets/images/icon.svg' - and that works, because without pattern I see my image
– MRaimon
Nov 27 '18 at 4:58
@ccprog thanks for answer! For pattern image I write absolute URL, this image is in files of my site. I tried use images from other sites - that not working too. Relative path to the icon.svg is '/assets/images/icon.svg' - and that works, because without pattern I see my image
– MRaimon
Nov 27 '18 at 4:58
@RobertLongson thanks for feedback! I tried to do what you say too, but unfortunately it is not working.
– MRaimon
Nov 27 '18 at 6:36
@RobertLongson thanks for feedback! I tried to do what you say too, but unfortunately it is not working.
– MRaimon
Nov 27 '18 at 6:36
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53485474%2fsvg-pattern-filling-is-not-working-with-use%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53485474%2fsvg-pattern-filling-is-not-working-with-use%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
try taking the pattern out of the symbol into the parent svg element.
– Robert Longson
Nov 26 '18 at 17:21
How do you link the image resource inside the pattern? Is that an external file? What is the relative path to the icon.svg file?
– ccprog
Nov 26 '18 at 17:39
@ccprog thanks for answer! For pattern image I write absolute URL, this image is in files of my site. I tried use images from other sites - that not working too. Relative path to the icon.svg is '/assets/images/icon.svg' - and that works, because without pattern I see my image
– MRaimon
Nov 27 '18 at 4:58
@RobertLongson thanks for feedback! I tried to do what you say too, but unfortunately it is not working.
– MRaimon
Nov 27 '18 at 6:36